Utilities: Grid & Aspect

Grid Columns

grid-cols-3

123 456

grid-cols-4

1234

grid-cols-6

123456

<p class="lp-text-xs lp-text-muted lp-mb-1">grid-cols-3</p>
<div class="lp-d-grid lp-grid-cols-3 lp-gap-2 lp-mb-3">
    <span class="lp-demo-box lp-p-2">1</span><span class="lp-demo-box lp-p-2">2</span><span class="lp-demo-box lp-p-2">3</span>
    <span class="lp-demo-box lp-p-2">4</span><span class="lp-demo-box lp-p-2">5</span><span class="lp-demo-box lp-p-2">6</span>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">grid-cols-4</p>
<div class="lp-d-grid lp-grid-cols-4 lp-gap-2 lp-mb-3">
    <span class="lp-demo-box lp-p-2">1</span><span class="lp-demo-box lp-p-2">2</span><span class="lp-demo-box lp-p-2">3</span><span class="lp-demo-box lp-p-2">4</span>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">grid-cols-6</p>
<div class="lp-d-grid lp-grid-cols-6 lp-gap-2">
    <span class="lp-demo-box lp-p-2">1</span><span class="lp-demo-box lp-p-2">2</span><span class="lp-demo-box lp-p-2">3</span><span class="lp-demo-box lp-p-2">4</span><span class="lp-demo-box lp-p-2">5</span><span class="lp-demo-box lp-p-2">6</span>
</div>

Column Span

col-span-2 col-span-2 col-span-2

col-span-4 col-span-2

col-span-full

<div class="lp-d-grid lp-grid-cols-6 lp-gap-2 lp-mb-3">
    <span class="lp-demo-box lp-p-2 lp-col-span-2">col-span-2</span>
    <span class="lp-demo-box lp-p-2 lp-col-span-2">col-span-2</span>
    <span class="lp-demo-box lp-p-2 lp-col-span-2">col-span-2</span>
</div>
<div class="lp-d-grid lp-grid-cols-6 lp-gap-2 lp-mb-3">
    <span class="lp-demo-box lp-p-2 lp-col-span-4">col-span-4</span>
    <span class="lp-demo-box lp-p-2 lp-col-span-2">col-span-2</span>
</div>
<div class="lp-d-grid lp-grid-cols-6 lp-gap-2">
    <span class="lp-demo-box lp-p-2 lp-col-span-full">col-span-full</span>
</div>

Grid Rows & Row Span

row-span-2 b c d e

<div class="lp-d-grid lp-grid-cols-3 lp-grid-rows-2 lp-gap-2">
    <span class="lp-demo-box lp-p-2 lp-row-span-2">row-span-2</span>
    <span class="lp-demo-box lp-p-2">b</span>
    <span class="lp-demo-box lp-p-2">c</span>
    <span class="lp-demo-box lp-p-2">d</span>
    <span class="lp-demo-box lp-p-2">e</span>
</div>

Grid Flow

grid-flow-col (items flow horizontally)

1234

grid-flow-row-dense

span-2 b c d span-2

<p class="lp-text-xs lp-text-muted lp-mb-1">grid-flow-col (items flow horizontally)</p>
<div class="lp-d-grid lp-grid-flow-col lp-gap-2 lp-mb-3">
    <span class="lp-demo-box lp-p-2">1</span><span class="lp-demo-box lp-p-2">2</span><span class="lp-demo-box lp-p-2">3</span><span class="lp-demo-box lp-p-2">4</span>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">grid-flow-row-dense</p>
<div class="lp-d-grid lp-grid-cols-4 lp-grid-flow-row-dense lp-gap-2">
    <span class="lp-demo-box lp-p-2 lp-col-span-2">span-2</span>
    <span class="lp-demo-box lp-p-2">b</span>
    <span class="lp-demo-box lp-p-2">c</span>
    <span class="lp-demo-box lp-p-2">d</span>
    <span class="lp-demo-box lp-p-2 lp-col-span-2">span-2</span>
</div>

Row Start / End

Explicit grid-row placement with row-start-* / row-end-*.

row-start-1 · row-end-4 b c d e f g

<p class="lp-text-xs lp-text-muted lp-mb-3">Explicit grid-row placement with <code class="lp-text-danger">row-start-*</code> / <code class="lp-text-danger">row-end-*</code>.</p>
<div class="lp-d-grid lp-grid-cols-3 lp-grid-rows-3 lp-gap-2">
    <span class="lp-demo-box lp-p-2 lp-row-start-1 lp-row-end-4">row-start-1 · row-end-4</span>
    <span class="lp-demo-box lp-p-2">b</span>
    <span class="lp-demo-box lp-p-2">c</span>
    <span class="lp-demo-box lp-p-2">d</span>
    <span class="lp-demo-box lp-p-2">e</span>
    <span class="lp-demo-box lp-p-2">f</span>
    <span class="lp-demo-box lp-p-2">g</span>
</div>

Auto Columns / Rows

grid-flow-col · auto-cols-fr (equal-width implicit columns)

1 2 3 4

grid-flow-col · auto-cols-max (sized to content)

short a much longer item mid

<p class="lp-text-xs lp-text-muted lp-mb-1">grid-flow-col · auto-cols-fr (equal-width implicit columns)</p>
<div class="lp-d-grid lp-grid-flow-col lp-auto-cols-fr lp-gap-2 lp-mb-3">
    <span class="lp-demo-box lp-p-2">1</span>
    <span class="lp-demo-box lp-p-2">2</span>
    <span class="lp-demo-box lp-p-2">3</span>
    <span class="lp-demo-box lp-p-2">4</span>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">grid-flow-col · auto-cols-max (sized to content)</p>
<div class="lp-d-grid lp-grid-flow-col lp-auto-cols-max lp-gap-2">
    <span class="lp-demo-box lp-p-2">short</span>
    <span class="lp-demo-box lp-p-2">a much longer item</span>
    <span class="lp-demo-box lp-p-2">mid</span>
</div>

Aspect Ratio

square (1:1)

1:1

video (16:9)

16:9

4x3

4:3

3x2

3:2

21x9

21:9

2x1

2:1

<div class="lp-d-grid lp-grid-cols-3 lp-gap-3">
    <div><p class="lp-text-xs lp-text-muted lp-mb-1">square (1:1)</p><div class="lp-demo-frame lp-aspect-square lp-d-flex lp-items-center lp-justify-center">1:1</div></div>
    <div><p class="lp-text-xs lp-text-muted lp-mb-1">video (16:9)</p><div class="lp-demo-frame lp-aspect-video lp-d-flex lp-items-center lp-justify-center">16:9</div></div>
    <div><p class="lp-text-xs lp-text-muted lp-mb-1">4x3</p><div class="lp-demo-frame lp-aspect-4x3 lp-d-flex lp-items-center lp-justify-center">4:3</div></div>
    <div><p class="lp-text-xs lp-text-muted lp-mb-1">3x2</p><div class="lp-demo-frame lp-aspect-3x2 lp-d-flex lp-items-center lp-justify-center">3:2</div></div>
    <div><p class="lp-text-xs lp-text-muted lp-mb-1">21x9</p><div class="lp-demo-frame lp-aspect-21x9 lp-d-flex lp-items-center lp-justify-center">21:9</div></div>
    <div><p class="lp-text-xs lp-text-muted lp-mb-1">2x1</p><div class="lp-demo-frame lp-aspect-2x1 lp-d-flex lp-items-center lp-justify-center">2:1</div></div>
</div>

CSS Reference

Class	Description
`.lp-grid-cols-{1..12}`	Grid template columns
`.lp-grid-cols-none`	Remove columns
`.lp-col-span-{1..12}`	Column span
`.lp-col-span-full`	Span all columns
`.lp-col-start-{1..13}` / `.lp-col-end-{1..13}`	Column start / end
`.lp-grid-rows-{1..6}`	Grid template rows
`.lp-row-span-{1..6}`	Row span
`.lp-grid-flow-{row\|col\|row-dense\|col-dense}`	Grid auto-flow
`.lp-row-start-{1..7}` / `.lp-row-end-{1..7}`	Row line placement
`.lp-auto-cols-{auto\|min\|max\|fr}`	Implicit column sizing
`.lp-auto-rows-{auto\|min\|max\|fr}`	Implicit row sizing
`.lp-place-{items\|content\|self}-{start\|center\|end\|stretch}`	Grid placement
`.lp-aspect-{auto\|square\|video\|4x3\|3x2\|21x9\|2x1\|1x2}`	Aspect ratio

Grid & Aspect Ratio