Grid Recipes Submodule

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

Grid Recipes. Ready-made layout patterns built on the grid engine: masonry galleries, exact-fit and peeking carousels, dense packing, and list integration.

📑 Contents

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

🌟 Overview

Recipes are opt-in classes layered on .g. Each one reuses the grid sizing pipeline (--g-min, --g-cols, --g-cg) so your cards stay consistent across every recipe.

Masonry (.g-ms) — variable-height galleries via CSS multi-column, with a native grid-lanes upgrade where supported.
Scroll / Carousel (.scr-N, .crs-N) — horizontal snap-scrolling, exact-fit or peeking.
Misc (.dense, .inline) — dense backfilling, inline-grid, and list resets for ul.g / ol.g.

🚀 Getting Started

<!-- Masonry gallery -->
<ul class="g g-ms">
  <li><figure>…</figure></li>
  <li><figure>…</figure></li>
  <li><figure>…</figure></li>
</ul>

<!-- Peeking carousel -->
<ul class="g crs-3">
  <li class="clk"><article class="crd">Slide 1</article></li>
  <li class="clk"><article class="crd">Slide 2</article></li>
  <li class="clk"><article class="crd">Slide 3</article></li>
  <li class="clk"><article class="crd">Slide 4 (peeking)</article></li>
</ul>

💡 How to Use It (Perfect Scenarios)

1. Masonry Gallery

Emmet: ul.g.g-ms>(li>figure)*6

<ul class="g g-ms">
  <li><figure>Short</figure></li>
  <li><figure>A longer card with more content…</figure></li>
  <li><figure>Short again</figure></li>
</ul>

Why: variable-height columns for Pinterest-style galleries. column-width: var(--g-min) drives the column count (column-count is auto); break-inside: avoid keeps items whole. Where the browser supports it, the @supports block upgrades to native display: grid-lanes.

2. Exact-Fit Scroll (Steps / Tiers)

Emmet: ul.g.scr-3>li.clk*6>article.crd

<ul class="g scr-3">
  <li class="clk"><article class="crd">Step 1</article></li>
  <li class="clk"><article class="crd">Step 2</article></li>
  <li class="clk"><article class="crd">Step 3</article></li>
  <li class="clk"><article class="crd">Step 4</article></li>
</ul>

Why: exactly 3 cards fit, gap math included. Perfect for steps, pricing tiers, or "how it works" strips.

3. Peeking Carousel (Products)

Emmet: ul.g.crs-3>li.clk*6>article.crd

<ul class="g crs-3">
  <li class="clk"><article class="crd">Product 1</article></li>
  <li class="clk"><article class="crd">Product 2</article></li>
  <li class="clk"><article class="crd">Product 3</article></li>
  <li class="clk"><article class="crd">Product 4 (peeking)</article></li>
</ul>

Why: 3 cards + the next one peeking signals scrollability. Add .ctrs for native ::scroll-button() arrows where supported: ul.g.crs-3.ctrs>li.clk*6>article.crd.

4. Dense Mosaic

Emmet: ul.g.g-4.dense>li*8

<ul class="g g-4 dense">
  <li class="gc-2 gr-2">Big</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>  <!-- auto-backfills -->
</ul>

Why: grid-auto-flow: dense fills holes left by large items — ideal for mixed-size media grids.

5. List Grid (No Card)

Emmet: ul.g>li*3

<ul class="g">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Why: ul.g / ol.g strip bullets, padding and flow margins automatically — a plain content grid with zero extras.

📦 Installation & Stats

This submodule is part of layout.css.

File	Full (Raw)	Clean	Min	Gzip	Brotli
`grid/recipes/masonry.css`	3.2 KB	1.4 KB	1.1 KB	1.1 KB	0.9 KB
`grid/recipes/scroll.css`	11.1 KB	9.8 KB	8.8 KB	2.1 KB	1.7 KB
`grid/recipes/misc.css`	0.5 KB	0.4 KB	0.3 KB	0.3 KB	0.2 KB

Stats reflect the last verified build from dist/latest.

📂 Files Reference

File	Description
`masonry.css`	`.g-ms`, `.g-gl`, `.grid-lanes` + `[data-recipe~="masonry
`scroll.css`	`.slr`, `.scr-1…4`, `.crs-1…4`, `.ctrs` + `[data-recipe~="slider
`misc.css`	`.dense` / `.g-d`, `.inline` / `.g-i`, and list resets on `ul/ol/li.g`.

📍 Reference: Content Map

Masonry

Class / Attribute	Effect
`.g-ms`, `.g-gl`, `.grid-lanes`	masonry layout
`[data-recipe~="masonry"]`, `[data-recipe~="gallery"]`, `[data-recipe~="lanes"]`	attribute API

Scroll / Carousel

Class	Effect
`.slr`, `.slider`, `.scr`, `.scr-1`	1 item, full width
`.scr-2`, `.scr-3`, `.scr-4`	exactly 2 / 3 / 4 items
`.crs-1` … `.crs-4`	N items + next peeking
`.ctrs` / `.scr-ctrs` / `.crs-ctrs`	native scroll buttons (guarded)

Responsive: --sm / --smd / --md / --mdl / --lg suffixes (e.g. .scr-3--md, .crs-2--lg).

Misc

Class	Alias	Effect
`.dense`	`.g-d`	`grid-auto-flow: dense`
`.inline`	`.g-i`	`display: inline-grid`

💡 Best Practices

Masonry widths follow --g-min — lower it for narrower columns.
Use .scr-N when every visible slot matters (steps, tiers); .crs-N when you want a "more ahead" hint.
Recipes stack cleanly on the grid column system — .g.g-3.g-ms inherits column counts where the fallback can use them.
column-count in the masonry fallback is deliberately auto (via --g-cols: initial) so column-width rules.

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