Grid

Grid는 행과 열을 동시에 다루는 2차원 레이아웃 도구입니다. 카드 격자, 대시보드, 페이지 전체 골격처럼 가로세로가 함께 얽힌 배치에 강력합니다.

학습 목표

• grid-template-columns와 rows로 격자를 정의한다.
• fr 단위와 repeat()로 간결하게 작성한다.
• gap과 grid-area로 간격과 영역 배치를 다룬다.
• auto-fit/minmax로 반응형 격자를 만든다.

시작하기

부모에 display: grid를 주고 열 구성을 정의합니다.

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

grid-template-columns에 적은 값의 개수만큼 열이 생기고, 자식들은 왼쪽 위부터 차례로 칸에 채워집니다.

fr 단위와 repeat

fr은 남는 공간을 비율로 나누는 단위이고, repeat()는 반복을 줄여 씁니다.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 비율 */
}

.grid2 {
  grid-template-columns: repeat(3, 1fr); /* 1fr 세 개 */
}

작성	의미
repeat(3, 1fr)	1fr 1fr 1fr
repeat(2, 100px 1fr)	100px 1fr 100px 1fr

행과 간격

행은 grid-template-rows로, 칸 사이 간격은 gap으로 지정합니다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  gap: 16px; /* 행과 열 모두 16px */
}

gap: 20px 12px처럼 쓰면 행 간격 20px, 열 간격 12px이 됩니다.

💡 TIP — Grid의 gap은 칸과 칸 사이에만 간격을 만들고 바깥쪽 가장자리에는 영향을 주지 않습니다. 바깥 여백은 컨테이너의 padding으로 처리하세요.

영역 배치: grid-area

이름을 붙인 영역으로 큰 레이아웃을 직관적으로 그릴 수 있습니다.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
}

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

반응형 그리드

auto-fit과 minmax()를 함께 쓰면 화면 너비에 따라 열 개수가 자동으로 바뀝니다.

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

각 칸은 최소 200px을 유지하다가, 공간이 충분하면 같은 행에 더 많은 칸이 들어가고 부족하면 줄어듭니다.

⚠️ 주의 — auto-fit은 빈 트랙을 접어 남는 칸을 늘리고, auto-fill은 빈 트랙을 그대로 유지합니다. 카드가 화면을 꽉 채우길 원하면 auto-fit을 사용하세요.

요약

• display: grid와 grid-template-columns로 격자를 정의합니다.
• fr은 비율 분배, repeat()는 반복 축약입니다.
• gap으로 칸 사이 간격, grid-area로 이름 기반 배치를 합니다.
• repeat(auto-fit, minmax(...))로 반응형 격자를 만듭니다.

연습문제

1. 너비가 같은 세 개의 열을 만드는 규칙을 repeat과 fr로 작성하세요.
2. 칸 사이 행 간격 24px, 열 간격 12px을 주는 규칙을 작성하세요.
3. 첫 열은 고정 250px, 둘째 열은 남는 공간 전부를 차지하게 하려면?
4. 카드가 최소 180px을 유지하며 화면 너비에 따라 열 개수가 자동 변하는 반응형 격자를 작성하세요.

힌트 — fr은 비율, gap은 두 값으로 행/열을 따로, 반응형은 auto-fit과 minmax를 떠올리세요.