Grid

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

Grid Template Columns (gtc)

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴	예시	CSS
Direct values	`gtc1fr-2fr-1fr`	1fr 2fr 1fr
Fixed+ratio	`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)

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">예시	CSS
`gtrauto-1fr-auto`	auto 1fr auto
`gtrr3-1fr`	repeat(3, 1fr)

특수 키워드

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">키워드	설명
`auto`	자동 크기
`min`	min-content
`max`	max-content
`subgrid`	subgrid
`fc100px`	fit-content(100px)

minmax

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`gtcminmax100px-1fr`	minmax(100px, 1fr)
`gtcminmax200px-300px-1fr`	minmax(200px, 300px) 1fr

calc

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`gtccalc100p-200px-1fr`	calc(100% - 200px) 1fr
`gtccalc-add50p-100px`	calc(50% + 100px)

Grid Auto Flow

<tr><th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	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

<tr><th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">프리픽스	속성	예시
`gac`	grid-auto-columns	`gac1fr`
`gar`	grid-auto-rows	`gar10rem`

Grid Column / Row (위치 지정)

<tr><th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">프리픽스	속성	예시
`gcs`	grid-column-start	`gcs1`
`gce`	grid-column-end	`gce3`
`grs`	grid-row-start	`grs1`
`gre`	grid-row-end	`gre3`

Place Items / Content / Self

<tr><th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	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

일반적인 패턴

<!-- Responsive cards (auto-fit) -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

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

<!-- Sidebar layout -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside>Sidebar</aside>
  <main>Content</main>
</div>

<!-- Fullscreen (header-main-footer) -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</div>