[CSS] Grid - grid-template

1. display: grid — Grid 레이아웃의 시작

CSS Grid를 사용하려면 가장 먼저 컨테이너를 Grid로 선언해야 합니다.

.container {
  display: grid;
}

이 한 줄로:

• .container → Grid Container
• 직계 자식 요소 → Grid Item

이후 모든 배치는 행(Row)과 열(Column) 기준으로 동작합니다.

 

 

2. grid-template-columns — 열(Column) 정의

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

열의 개수와 각 열의 크기를 정의

컬럼	크기
1열	100px
2열	남은 공간(1fr)
3열	100px

fr 단위

남은 공간을 비율로 나눔

3. grid-template-rows — 행(Row) 정의

.container {
  grid-template-rows: 80px auto 120px;
}

행의 개수와 높이를 정의

행	높이
1행	80px
2행	콘텐츠 기준(auto)
3행	120px

 

4. grid-template — columns + rows 축약 문법

grid-template:
  rows / columns;
  
  .container {
  grid-template: 100px auto / 200px 1fr;
}

 

5. 정리하면

CSS Grid는 먼저 레이아웃의 뼈대(행·열)를 정의하고,
그 위에 요소를 배치하는 좌표 기반 시스템이다.
grid-template 계열 속성은 그 뼈대를 만드는 핵심 도구다.