[웹 디자인] 18일차: 그리드 레이아웃을 이용한 반응형 디자인

그리드 레이아웃이란?

그리드 레이아웃(Grid Layout)은 CSS의 강력한 2차원 레이아웃 시스템으로, 행과 열을 사용하여 웹 페이지의 요소들을 배치할 수 있게 해줍니다. 그리드 레이아웃을 사용하면 복잡한 레이아웃을 쉽게 구현할 수 있으며, 반응형 디자인에도 매우 유용합니다.

그리드 컨테이너와 아이템

• 그리드 컨테이너: display: grid를 설정한 요소입니다.
• 그리드 아이템: 그리드 컨테이너 안에 있는 모든 직계 자식 요소입니다.

예제:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

반응형 그리드 레이아웃 예제

기본 2열 레이아웃

화면 크기가 작아질 때 한 열로 변경되는 2열 레이아웃을 구현해보겠습니다.

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.item {
  background-color: lightgrey;
  padding: 20px;
  text-align: center;
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* 화면이 600px 이하일 때 한 열로 변경 */
  }
}

네비게이션 바

반응형 네비게이션 바를 그리드 레이아웃으로 구현해보겠습니다.

HTML:

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.navbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 10px;
  background-color: #333;
}

.logo {
  color: white;
  font-size: 24px;
}

.nav-links {
  display: flex;
  list-style: none;
  justify-content: flex-end;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

@media (max-width: 768px) {
  .nav-links {
    display: none; /* 작은 화면에서는 네비게이션 링크 숨기기 */
  }
}

카드 레이아웃

반응형 카드 레이아웃을 그리드 레이아웃으로 구현해보겠습니다.

HTML:

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

CSS:

.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.card {
  background-color: lightgrey;
  padding: 20px;
  text-align: center;
}

@media (max-width: 1024px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr); /* 화면이 1024px 이하일 때 2열로 변경 */
  }
}

@media (max-width: 768px) {
  .card-container {
    grid-template-columns: 1fr; /* 화면이 768px 이하일 때 한 열로 변경 */
  }
}

복잡한 레이아웃 예제

복합 그리드 레이아웃

더 복잡한 그리드 레이아웃을 구현해보겠습니다.

HTML:

<div class="complex-grid">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="content">Content</main>
  <aside class="aside">Aside</aside>
  <footer class="footer">Footer</footer>
</div>

CSS:

.complex-grid {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar content aside'
    'footer footer footer';
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgrey;
  padding: 20px;
}

.content {
  grid-area: content;
  background-color: white;
  padding: 20px;
}

.aside {
  grid-area: aside;
  background-color: lightgrey;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .complex-grid {
    grid-template-areas:
      'header'
      'content'
      'sidebar'
      'aside'
      'footer';
    grid-template-columns: 1fr;
  }
}

결론

그리드 레이아웃을 사용하면 복잡한 2차원 레이아웃을 쉽게 구현할 수 있으며, 반응형 디자인을 통해 다양한 화면 크기와 기기에 맞게 레이아웃을 조정할 수 있습니다. 이번 글에서는 그리드 레이아웃의 기본 개념과 다양한 반응형 예제를 다루었습니다.

다음 글에서는 타이포그래피 디자인에 대해 알아보겠습니다.

다음 글에서 만나요!