AAtomic CSS

grid-auto-columns

암시적으로 생성되는 열(column)의 크기를 설정합니다. grid-template-columns로 정의하지 않은 열이 자동으로 생길 때 적용됩니다.

클래스 목록

클래스CSS설명
gac1frgrid-auto-columns: 1fr암시적 열을 균등 비율로 생성
gac100pxgrid-auto-columns: 100px암시적 열을 100px 고정 크기로 생성
gac20remgrid-auto-columns: 20rem암시적 열을 200px(20rem) 크기로 생성
gac200pxgrid-auto-columns: 200px암시적 열을 200px 고정 크기로 생성

사용 예시

아이템이 grid-column으로 정의된 열 범위를 넘어갈 때, 자동 생성되는 열의 크기를 제어합니다.

<!-- 2열 정의 + 암시적 열 크기 지정 -->
<div class="dg gtc1fr-1fr gac1fr gap16px">
  <div>1</div>
  <div>2</div>
  <div>3 (암시적 열)</div>
</div>

<!-- 고정 크기 암시적 열 -->
<div class="dg gtc1fr gac200px gap16px">
  <div>정의된 열</div>
  <div>암시적 200px 열</div>
</div>

시각적 비교

기본 (auto) — dg

1234

gac1fr — dg gac1fr

1234

팁 & 주의사항

암시적 열이란?

gtc로 정의한 열 수보다 아이템이 더 많거나, gcs/gce로 범위를 넘어가면 자동으로 열이 생성됩니다. 이때 gac가 그 크기를 결정합니다.

grid-auto-flow와 함께 사용

기본 흐름은 행(row) 방향입니다. 열 방향으로 자동 배치하려면 grid-auto-flow: column을 함께 지정해야 gac가 의미를 가집니다.

grid-auto-rowsgrid-template-columnsgrid