CSS Grid

2차원(가로+세로 동시) 레이아웃을 만드는 CSS Grid — grid-template-columns/rows, fr 단위, grid-column/row, grid-template-areas, auto-fill/fit까지.

CSSGrid레이아웃

소요 시간

⏱ 60분

난이도

📊 초보~중급

선수 조건

🎯 css-05

결과물

잡지 레이아웃, 대시보드, 반응형 카드 그리드

이 강의에서 배우는 것

1grid-template-columns/rows를 정의한다
2fr 단위와 minmax(), auto-fill/auto-fit을 사용한다
3grid-column/row로 아이템 배치를 제어한다
4grid-template-areas로 시각적 레이아웃을 정의한다
5Flexbox와 Grid를 상황에 맞게 선택한다

1. Grid 기본

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;        /* 고정 + 균등 2열 */
  grid-template-columns: repeat(3, 1fr);        /* 3열 균등 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* 반응형 */

  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

2. fr 단위

fr은 남은 공간의 비율입니다.

css

grid-template-columns: 1fr 2fr 1fr;
/* 4등분: 첫 1/4, 둘째 2/4, 셋째 1/4 */

3. 아이템 배치

css

.item {
  grid-column: 1 / 3;    /* 1번 라인~3번 라인 (2열 차지) */
  grid-column: 1 / -1;   /* 전체 너비 */
  grid-column: span 2;   /* 현재 위치에서 2열 차지 */

  grid-row: 1 / 3;       /* 2행 차지 */
  grid-row: span 2;
}

4. grid-template-areas

이름으로 레이아웃을 시각적으로 정의합니다.

css

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

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

5. auto-fill vs auto-fit

css

/* auto-fill: 가능한 한 많은 열, 빈 열 생길 수 있음 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: 아이템에 맞게 채움, 빈 열은 0으로 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

6. 정렬

css

.container {
  justify-items: start | center | end | stretch;  /* 셀 가로 정렬 */
  align-items:   start | center | end | stretch;  /* 셀 세로 정렬 */
  justify-content: start | center | space-between; /* 그리드 가로 */
  align-content:   start | center | space-between; /* 그리드 세로 */
}

.item {
  justify-self: center;  /* 이 아이템만 가로 중앙 */
  align-self: end;
}

7. Flexbox vs Grid

상황	권장
한 방향만 정렬	Flexbox
두 방향 동시 제어	Grid
아이템 크기가 불규칙	Flexbox
정해진 행/열 레이아웃	Grid
네비게이션, 버튼 그룹	Flexbox
페이지 전체 레이아웃, 대시보드	Grid

💡

실무에서는 Grid로 전체 레이아웃을 잡고, 내부 컴포넌트는 Flexbox로 구현하는 패턴이 많습니다.

예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗