[CSS] #11 Flexbox & Grid, CSS Grid 기초 완전 정복! 2차원 레이아웃 설계를 위한 핵심 속성 정리

 

 

안녕하세요, 토스트데브입니다!
지난 글에서 Flexbox로 수평 또는 수직 정렬을 다뤘다면, 오늘은 한 차원 더 확장된 레이아웃 시스템인 CSS Grid Layout에 대해 배워보겠습니다.

Grid는 2차원(행과 열)의 격자 구조를 기반으로 정교한 레이아웃을 설계할 수 있어, 대시보드, 갤러리, 블로그 카드 등 다양한 UI에 유용하게 활용됩니다.

 

 

1️⃣ CSS Grid란?

CSS Grid Layout은 요소를 행(row)과 열(column) 기준으로 배치하는 2차원 레이아웃 시스템입니다.

• display: grid를 부모 요소에 지정하면, 해당 요소는 Grid 컨테이너
• 자식 요소들은 Grid 아이템이 됩니다.

 

 

2️⃣ 기본 구조

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

👉 위 코드는 너비가 100px인 3개의 열로 구성된 Grid를 생성합니다.

 

 

3️⃣ 주요 속성 정리

✅ display: grid

Grid 레이아웃을 활성화합니다.

 

✅ grid-template-columns – 열 정의

grid-template-columns: 1fr 1fr 1fr;

• 3개의 열 생성, 각 열은 전체 너비의 1/3씩 차지
• fr은 fraction 단위로, 남은 공간을 비율로 나눕니다.

다른 예:

grid-template-columns: 200px auto 1fr;

 

✅ grid-template-rows – 행 정의

grid-template-rows: 100px 200px;

• 첫 번째 행: 100px
• 두 번째 행: 200px

 

✅ gap 또는 row-gap, column-gap

grid-gap: 20px;

• 행과 열 사이에 공백 추가

row-gap: 10px;
column-gap: 30px;

 

✅ grid-column, grid-row – 아이템 위치 지정

.item1 {
  grid-column: 1 / 3; /* 1열부터 2열까지 차지 */
}

.item2 {
  grid-row: 2 / 4; /* 2행부터 3행까지 차지 */
}

 

✅ grid-template-areas – 이름 기반 레이아웃

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

💡 HTML 구조와 시각적 레이아웃을 분리하여 가독성과 유지보수성이 향상됩니다.

 

✅ justify-items / align-items – 아이템 정렬

• justify-items: 열 기준 정렬 (가로)
• align-items: 행 기준 정렬 (세로)

.grid-container {
  justify-items: center;
  align-items: center;
}

 

✅ justify-content / align-content – 전체 그리드 정렬

• justify-content: 가로 방향으로 전체 Grid 위치 조정
• align-content: 세로 방향으로 전체 Grid 위치 조정

 

 

4️⃣ 반응형을 위한 auto-fit & minmax

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

 

• 열의 수를 자동 조정하며, 최소 200px, 최대 남은 공간 사용
• 반응형 카드 레이아웃, 갤러리 등에 필수

 

 

5️⃣ 예제: 간단한 카드 레이아웃

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

 

👉 이렇게 하면 화면 크기에 따라 유동적으로 카드가 줄바꿈되며 정렬됩니다.

 

 

✅ 정리하며…

CSS Grid는 Flexbox보다 구조적이고, 복잡한 UI 레이아웃도 더 간단하고 직관적으로 설계할 수 있습니다.
특히, 정렬 + 위치 지정 + 반응형 설계가 쉬워서 대형 프로젝트에 적합합니다.

Flexbox vs Grid 요약

• Flexbox: 한 줄 정렬에 최적 (1차원)
• Grid: 격자 기반의 전체 레이아웃에 최적 (2차원)

 

 

#CSSGrid #그리드레이아웃 #displayGrid #웹디자인기초 #프론트엔드기초 #반응형디자인 #CSS기초 #gridTemplate #2차원레이아웃 #웹개발입문