CSS grid-template-columns 속성
예시
4열 그리드 컨테이너를 만듭니다.
.grid-container {
display: grid;
grid-template-columns:
auto auto auto auto;
}
정의 및 사용
grid-template-columns
속성은 그리드 레이아웃의 열 수(및 너비)를 지정합니다 .
값은 공백으로 구분된 목록이며, 여기서 각 값은 해당 열의 크기를 지정합니다.
기본값: | 없음 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 예. 애니메이션 가능 에 대해 읽기 |
버전: | CSS 그리드 레이아웃 모듈 레벨 1 |
자바스크립트 구문: | 개체 .style.gridTemplateColumns="50px 50px 50px" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
grid-template-columns | 57 | 16 | 52 | 10 | 44 |
CSS 구문
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
none | Default value. Columns are created if needed | |
auto | The size of the columns is determined by the size of the container and on the size of the content of the items in the column | |
max-content | Sets the size of each column to depend on the largest item in the column | |
min-content | Sets the size of each column to depend on the smallest item in the column | |
length | Sets the size of the columns, by using a legal length value. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
4열 그리드 컨테이너를 만들고 각 열의 크기를 지정합니다.
.grid-container {
display: grid;
grid-template-columns:
30px 200px auto 100px;
}
관련 페이지
CSS 튜토리얼: CSS 그리드 레이아웃
CSS 참조: grid-template-rows 속성
CSS 참조: grid-template 속성