Grid

The core system of CSS Grid layout. Atomic CSS recommends using Grid.

Grid Template Columns (gtc)

Pattern	Example	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)

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

Special Keywords

Keyword	Description
`auto`	Auto size
`min`	min-content
`max`	max-content
`subgrid`	subgrid
`fc100px`	fit-content(100px)

minmax

Class	CSS
`gtcminmax100px-1fr`	minmax(100px, 1fr)
`gtcminmax200px-300px-1fr`	minmax(200px, 300px) 1fr

calc

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

Grid Auto Flow

Class	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

Prefix	Property	Example
`gac`	grid-auto-columns	`gac1fr`
`gar`	grid-auto-rows	`gar10rem`

Grid Column / Row (Positioning)

Prefix	Property	Example
`gcs`	grid-column-start	`gcs1`
`gce`	grid-column-end	`gce3`
`grs`	grid-row-start	`grs1`
`gre`	grid-row-end	`gre3`

Place Items / Content / Self

Class	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

Common Patterns

<!-- 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>