행과 열로 만드는 구조, Grid

Grid는 2차원 레이아웃 을 다루는 CSS 레이아웃 방식이다.
행(row)과 열(column)을 동시에 제어할 수 있어 복잡한 레이아웃을 구성할 때 적합하다.
display: grid를 선언한 요소가 그리드 컨테이너, 그 안의 자식 요소가 그리드 아이템이 된다.

컨테이너 속성

① grid-template-columns / grid-template-rows

열과 행의 개수와 크기를 정의한다.


.container {
  display: grid;
 
  /* 3열 — 각각 200px */
  grid-template-columns: 200px 200px 200px;
 
  /* 3열 — 균등 비율 */
  grid-template-columns: 1fr 1fr 1fr;
 
  /* repeat()으로 줄여 쓰기 */
  grid-template-columns: repeat(3, 1fr);
 
  /* 혼합 */
  grid-template-columns: 200px 1fr 1fr;
 
  /* 행 높이 지정 */
  grid-template-rows: 100px auto;
}

② fr 단위

Grid에서 사용하는 비율 단위이다. 남은 공간을 비율로 나눈다.


.container {
  grid-template-columns: 1fr 2fr 1fr;
  /* 전체를 4등분 → 1/4, 2/4, 1/4 */
}

③ repeat()

동일한 패턴을 반복할 때 사용한다.


.container {
  /* repeat(반복횟수, 크기) */
  grid-template-columns: repeat(4, 1fr);
 
  /* auto-fill — 가능한 많은 열을 자동 생성 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 
  /* auto-fit — auto-fill과 유사하지만 빈 트랙을 접음 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

auto-fill과 minmax()의 조합은 반응형 카드 레이아웃에서 자주 사용한다.

④ gap

행과 열 사이의 간격을 지정한다.


.container {
  gap: 16px;          /* 행·열 간격 동일 */
  gap: 8px 16px;      /* 행 간격 8px, 열 간격 16px */
  row-gap: 8px;       /* 행 간격만 */
  column-gap: 16px;   /* 열 간격만 */
}

⑤ grid-template-areas

이름을 붙여 레이아웃을 시각적으로 정의한다.


.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; }

아이템 속성

① grid-column / grid-row

아이템이 차지할 열·행의 범위를 지정한다.


.item {
  /* 1번 선에서 3번 선까지 — 2열 차지 */
  grid-column: 1 / 3;
 
  /* span으로 몇 칸 차지할지 지정 */
  grid-column: span 2;
 
  /* 행도 동일한 방식 */
  grid-row: span 2;
}

② justify-self / align-self

개별 아이템의 정렬을 지정한다.


.item {
  justify-self: start | center | end | stretch;  /* 열 방향 */
  align-self: start | center | end | stretch;    /* 행 방향 */
}

grid

정리

분류	속성	설명
컨테이너	`display: grid`	Grid 시작
컨테이너	`grid-template-columns`	열 정의
컨테이너	`grid-template-rows`	행 정의
컨테이너	`grid-template-areas`	이름으로 레이아웃 정의
컨테이너	`gap`	간격
컨테이너	`repeat()`	반복 패턴
단위	`fr`	남은 공간 비율
아이템	`grid-column`	열 범위
아이템	`grid-row`	행 범위
아이템	`grid-area`	영역 이름 지정

body {
  background: #0f172a;
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.item {
  background: #3b82f6;
  color: white;
  padding: 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

Open Sandbox