AAtomic CSS

grid-auto-columns

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
gac1frgrid-auto-columns: 1fr암시적 열을 균등 비율로 생성
gac100pxgrid-auto-columns: 100px암시적 열을 100px 고정 크기로 생성
gac20remgrid-auto-columns: 20rem암시적 열을 200px(20rem) 크기로 생성
gac200pxgrid-auto-columns: 200px암시적 열을 200px 고정 크기로 생성

사용 예시

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

<!-- 2 columns defined + implicit column size -->
<div class="dg gtc1fr-1fr gac1fr gap16px">
  <div>1</div>
  <div>2</div>
  <div>3 (implicit column)</div>
</div>

<!-- Fixed size implicit columns -->
<div class="dg gtc1fr gac200px gap16px">
  <div>Defined column</div>
  <div>Implicit 200px column</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