CSS Grid 레이아웃 요약표 (Cheat Sheet)

이 페이지는 그리드 컨테이너와 그리드 아이템의 핵심 속성 및 실용적인 레이아웃 사례를 포함한 CSS Grid 레이아웃의 시각적 요약표(Cheat Sheet)를 제공합니다.

그리드 컨테이너 (Grid Container)

속성	값	설명
`display`	`grid`	요소를 그리드 컨테이너로 정의
`grid-template-columns`	`100px 1fr`	열(Column)의 너비 정의
`grid-template-rows`	`100px 1fr`	행(Row)의 높이 정의
`grid-template-areas`	`header header` `sidebar main` `footer footer`	영역에 이름을 붙여 그리드 정의
`grid-column-gap`	`10px`	열 사이의 간격 정의
`grid-row-gap`	`10px`	행 사이의 간격 정의
`grid-gap`	`10px 20px`	행과 열의 간격을 동시에 정의
`justify-items`	`start`	그리드 아이템의 셀 내 가로 정렬 방식
`align-items`	`start`	그리드 아이템의 셀 내 세로 정렬 방식
`justify-content`	`start`	그리드 전체의 컨테이너 내 가로 정렬 방식
`align-content`	`start`	그리드 전체의 컨테이너 내 세로 정렬 방식

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

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

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

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

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