실제 사례와 함께 CSS Grid Layout 마스터하기 (초급부터 고급까지)

Source: Dev.to

CSS Grid란?

CSS Grid는 현대 웹 개발에서 가장 강력한 레이아웃 시스템 중 하나입니다. Flexbox나 외부 프레임워크에 크게 의존하지 않고도 최소한의 코드로 복잡하고 반응형 레이아웃을 만들 수 있습니다. 이 가이드에서는 실제 작동 예제를 통해 기본 레이아웃부터 고급 반응형 디자인까지 CSS Grid를 사용하는 방법을 배웁니다.

기본 그리드 레이아웃

예시: 2열 레이아웃

HTML

<div class="grid">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid div {
  background: lightblue;
  padding: 20px;
}

Result: 10 px 간격을 두고 같은 크기의 두 열이 생성됩니다.

반응형 그리드 (Auto Fit)

예시: 카드 레이아웃

HTML

<div class="grid">
  <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

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.card {
  background: rgb(93 192 223);
  padding: 20px;
}

Result: 카드가 자동으로 줄 바꿈되고 크기가 조정되어 최소 너비 200 px을 유지합니다.

대시보드 레이아웃

HTML

<div class="container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

CSS

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  gap: 10px;
}

header {
  grid-area: header;
  background: #596af7;
  color: white;
}
aside {
  grid-area: sidebar;
  background: #eee;
  color: black;
}
main {
  grid-area: main;
  background: #eee;
}
footer {
  grid-area: footer;
  background: #333;
  color: white;
}

Result: 고정 너비 사이드바와 반응형 메인 영역을 갖춘 전형적인 대시보드 레이아웃입니다.

이미지 갤러리 레이아웃

HTML

<div class="img-gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

CSS

.img-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.img-gallery img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

Result: 최소 너비 250 px을 기준으로 한 행에 가능한 많은 이미지를 채워 넣는 반응형 갤러리입니다.

그리드로 가운데 정렬

HTML

<div class="grid-center">
  Grid Center
</div>

CSS

.grid-center {
  display: grid;
  place-items: center;
  height: 100vh;
}

Result: 텍스트 “Grid Center”가 뷰포트 내에서 수직·수평 모두 완벽하게 가운데 정렬됩니다.

CSS Grid vs Flexbox

CSS Grid와 Flexbox는 모두 강력한 레이아웃 도구이지만, 각각 잘 맞는 상황이 다릅니다:

• CSS Grid는 대시보드, 갤러리, 복잡한 페이지 구조와 같이 행 및 열을 모두 활용하는 2차원 레이아웃에 이상적입니다.
• Flexbox는 네비게이션 바, 버튼 그룹, 간단한 정렬 작업 등 행 또는 열 중 하나만 사용하는 1차원 레이아웃에 강점이 있습니다.

어떤 도구를 선택할지는 프로젝트의 레이아웃 요구사항에 따라 결정됩니다.