CSS grid-template-columns 속성

정의와 사용법

grid-template-columns 속성은 그리드 레이아웃에서 열 수(또는 너비)를 정의합니다.

이 값들은 공백으로 구분된 목록이며 각 값은 해당 열의 크기를 지정합니다.

다른 참조:

CSS 강의:CSS 그리드 레이아웃

CSS 참조 설명서:grid-template-rows 속성

CSS 참조 설명서:grid-template 속성

예제

예제 1

네 열의 그리드 컨테이너를 만듭니다:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

개인적으로 시도해 보세요

예제 2

네 열의 그리드 레이아웃을 만들고 각 열의 크기를 정의합니다:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

개인적으로 시도해 보세요

CSS 문법

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

속성 값

값 설명
none 기본값. 필요 시 열을 생성합니다.
auto 열의 크기는 컨테이너의 크기와 열에 있는 요소 내용의 크기에 따라 결정됩니다.
max-content 열 중 가장 큰 요소에 따라 각 열의 크기를 설정합니다.
min-content 열 중 가장 작은 요소에 따라 각 열의 크기를 설정합니다.
length 열의 크기를 설정하려면 적절한 길이 값을 사용하여 설정합니다. 참조:길이 단위.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit 부모 요소에서 이 속성을 상속합니다. 참조: inherit.

기술 세부 사항

기본값: none
상속: 아니요
애니메이션 제작: 지원. 참조:애니메이션 관련 속성.
버전: CSS Grid Layout Module Level 1
JavaScript 문법: object.style.gridTemplateColumns="50px 50px 50px"

브라우저 지원

표中之数字은 이 속성을 완전히 지원하는 최초 브라우저 버전을 기재했습니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
57 16 52 10 44