CSS 그리드 자동 컬럼 속성

정의와 사용법

grid-auto-columns 속성은 그리드 컨테이너 내 컬럼의 크기를 설정합니다.

이 속성은 크기를 설정하지 않은 컬럼에만 영향을 미칩니다.

또한 참고:

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

CSS 참조 가이드:grid-auto-rows 속성

예제

그리드의 컬럼에 기본 크기를 설정합니다:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

직접 시도해 보세요

CSS 문법

grid-auto-columns: auto|max-content|min-content|length;

속성 값

값 설명
auto 기본 값. 컨테이너 크기에 따라 컬럼의 크기를 결정합니다.
fit-content()
max-content 컬럼에서 가장 큰 항목에 따라 각 컬럼의 크기를 설정합니다.
min-content 컬럼에서 가장 작은 항목에 따라 각 컬럼의 크기를 설정합니다.
minmax(min.max) min과 max 사이의 크기 범위를 설정합니다.
length 컬럼의 크기를 유효한 길이 값으로 설정합니다. 참고:길이 단위。
% 컬럼의 크기를 세트비율을 사용하여 설정합니다.

기술 세부 사항

기본 값: auto
thừa kế: 아니요
애니메이션 제작: 지원. 참고:애니메이션 관련 속성。
버전: CSS Grid Layout Module Level 1
JavaScript 문법: object.style.gridAutoColumns="120px"

브라우저 지원

표의 숫자는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

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