Grid

CSS Grid 레이아웃의 핵심 시스템입니다. Atomic CSS에서는 Grid 사용을 권장합니다.

Grid Template Columns (gtc)

패턴	예시	CSS
직접 지정	`gtc1fr-2fr-1fr`	1fr 2fr 1fr
고정+비율	`gtc200px-auto-1fr`	200px auto 1fr
repeat	`gtcr3-1fr`	repeat(3, 1fr)
auto-fit	`gtcrfit-minmax200px-1fr`	repeat(auto-fit, minmax(200px, 1fr))
auto-fill	`gtcrfill-minmax250px-1fr`	repeat(auto-fill, minmax(250px, 1fr))

Grid Template Rows (gtr)

예시	CSS
`gtrauto-1fr-auto`	auto 1fr auto
`gtrr3-1fr`	repeat(3, 1fr)

특수 키워드

키워드	설명
`auto`	자동 크기
`min`	min-content
`max`	max-content
`subgrid`	subgrid
`fc100px`	fit-content(100px)

minmax

클래스	CSS
`gtcminmax100px-1fr`	minmax(100px, 1fr)
`gtcminmax200px-300px-1fr`	minmax(200px, 300px) 1fr

calc

클래스	CSS
`gtccalc100p-200px-1fr`	calc(100% - 200px) 1fr
`gtccalc-add50p-100px`	calc(50% + 100px)

Grid Auto Flow

클래스	CSS
`gafr`	grid-auto-flow: row
`gafc`	grid-auto-flow: column
`gafd`	grid-auto-flow: dense
`gafrd`	grid-auto-flow: row dense
`gafcd`	grid-auto-flow: column dense

Grid Auto Columns / Rows

프리픽스	속성	예시
`gac`	grid-auto-columns	`gac1fr`
`gar`	grid-auto-rows	`gar10rem`

Grid Column / Row (위치 지정)

프리픽스	속성	예시
`gcs`	grid-column-start	`gcs1`
`gce`	grid-column-end	`gce3`
`grs`	grid-row-start	`grs1`
`gre`	grid-row-end	`gre3`

Place Items / Content / Self

클래스	CSS
`pis`	place-items: start
`pic`	place-items: center
`pie`	place-items: end
`pist`	place-items: stretch
`pcs`	place-content: start
`pcc`	place-content: center
`pce`	place-content: end
`pcst`	place-content: stretch
`pcsb`	place-content: space-between
`pcsa`	place-content: space-around
`pcse`	place-content: space-evenly
`pss`	place-self: start
`psc`	place-self: center
`pse`	place-self: end
`psst`	place-self: stretch
`psa`	place-self: auto

일반적인 패턴

<!-- 반응형 카드 (auto-fit) -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div>카드 1</div>
  <div>카드 2</div>
  <div>카드 3</div>
</div>

<!-- 3열 → 2열 → 1열 -->
<div class="dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
  ...
</div>

<!-- 사이드바 레이아웃 -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside>사이드바</aside>
  <main>콘텐츠</main>
</div>

<!-- 풀스크린 (header-main-footer) -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header>헤더</header>
  <main>콘텐츠</main>
  <footer>푸터</footer>
</div>