Grid Item Submodule

Navigation: uCss > Source > Modules > Layout > Grid > Item

Grid Item Placement. The per-item API for everything inside a grid (.g > * / .sg > *): span classes (.gc-*, .gr-*) and the full CSS-variable API (--gc, --gr, --ga, --gi-*) at every breakpoint.

📑 Contents

🌟 Overview
🚀 Getting Started
💡 How to Use It (Perfect Scenarios)
📦 Installation & Stats
📂 Files Reference
📍 Reference: Content Map
- Span Classes
- CSS Variable API
💡 Best Practices

🌟 Overview

Every direct child of a grid (.g, .sg, .sgc, …) automatically receives the item API. You get sane defaults (flex-free, align-self: auto, order: 0) plus two ways to place items:

Utility classes — .gc-* (column spans), .gr-* (row spans), .gc-f / .gr-f (full bleed), all with responsive suffixes.
CSS variables — --gc, --gr, --ga, --as, --js, --o (and --gi-* aliases) for inline overrides without writing a single class.

🚀 Getting Started

<ul class="g g-3">
  <li class="clk gc-2--lg"><article class="crd">Featured — spans 2 on lg</article></li>
  <li class="clk"><article class="crd">Normal</article></li>
  <li class="clk"><article class="crd">Normal</article></li>
</ul>

The li is the grid item — it gets the item API automatically. The .clk wrapper makes the card clickable.

💡 How to Use It (Perfect Scenarios)

1. Editorial Highlight

Emmet: ul.g.g-3>(li.clk.gc-2--lg>article.crd+li.clk+li.clk)

<ul class="g g-3">
  <li class="clk gc-2--lg"><article class="crd">Featured (2 cols)</article></li>
  <li class="clk"><article class="crd">…</article></li>
  <li class="clk"><article class="crd">…</article></li>
</ul>

Why: one hero spans 2 columns on desktop; collapses naturally on tablet/mobile.

2. Tall Featured Item

Emmet: ul.g>(li.clk.gr-2>article.crd+li.clk>article.crd)*2

<ul class="g">
  <li class="clk gr-2"><article class="crd">Tall (2 rows)</article></li>
  <li class="clk"><article class="crd">…</article></li>
  <li class="clk gr-2"><article class="crd">Tall (2 rows)</article></li>
  <li class="clk"><article class="crd">…</article></li>
</ul>

Why: alternating tall/normal items create an editorial rhythm.

Emmet: ul.g>(li.clk.gc-f>article.crd>li.clk)*3

<ul class="g">
  <li class="clk gc-f"><article class="crd">Full-width banner</article></li>
  <li class="clk"><article class="crd">…</article></li>
  <li class="clk"><article class="crd">…</article></li>
</ul>

Why: .gc-f (1 / -1) spans every column — perfect for section dividers or feature banners inside a grid.

4. Inline Variable Override (No Utility Classes)

Emmet: ul.g.g-3>li.clk*3>article.crd — then override on one item:

<ul class="g g-3">
  <li class="clk" style="--gc--lg: span 2; --as--sm: center;"><article class="crd">…</article></li>
  <li class="clk"><article class="crd">…</article></li>
  <li class="clk"><article class="crd">…</article></li>
</ul>

Why: one-off placements without polluting the class list.

📦 Installation & Stats

This submodule is part of layout.css.

File	Full (Raw)	Clean	Min	Gzip	Brotli
`grid/item/base.css`	4.7 KB	3.9 KB	3.1 KB	0.8 KB	0.7 KB
`grid/item/placement.css`	3.9 KB	3.5 KB	2.8 KB	0.7 KB	0.5 KB

Stats reflect the last verified build from dist/latest.

📂 Files Reference

File	Description
`base.css`	Item API. The `:where(.g > )` rules — default grow/shrink/basis, alignment, order, and all `--gc` / `--gr` / `--ga` / `--gi-` variables (base + `--sm`/`--md`/`--lg`).
`placement.css`	Span Classes. `.gc-1`…`.gc-12`, `.gr-1`…`.gr-5`, `.gc-f` / `.gr-f` with `--sm`/`--smd`/`--md`/`--mdl`/`--lg` variants.

📍 Reference: Content Map

Span Classes

Class	Effect	Responsive
`.gc-1` … `.gc-12`	`grid-column: span N`	`--sm`, `--smd`, `--md`, `--mdl`, `--lg`
`.gr-1` … `.gr-5`	`grid-row: span N`	`--sm`, `--smd`, `--md`, `--mdl`, `--lg`
`.gc-f`	`grid-column: 1 / -1` (full width)	same
`.gr-f`	`grid-row: 1 / -1` (full height)	same

CSS Variable API

Variable	Aliases	Breakpoint variants	Controls
`--gc`	`--gi-col`	`--gc--sm`, `--gc--md`, `--gc--lg`	`grid-column`
`--gr`	`--gi-row`	`--gr--sm`, `--gr--md`, `--gr--lg`	`grid-row`
`--ga`	`--area`	`--ga--sm`, `--ga--md`, `--ga--lg`	`grid-area`
`--as`	`--gi-as`	`--gi-as--sm`, `--gi-as--md`, `--gi-as--lg`	`align-self`
`--js`	`--gi-js`	`--gi-js--sm`, `--gi-js--md`, `--gi-js--lg`	`justify-self`
`--o`	`--gi-o`	`--gi-o--sm`, `--gi-o--md`, `--gi-o--lg`	`order`
`--gi-mbs`	—	—	`min-block-size`
`--gi-mis`	—	—	`min-inline-size`

💡 Best Practices

The li in ul.g > li > article.crd is the grid item — don't put span classes on the .crd.
Use utility classes for repeatable patterns, CSS variables for one-off placements.
.gc-f is the cleanest way to break an item out across every column.