Grid

CSS Grid with column variants, subgrid support, and span utilities.

Columns

1
2
1
2
3
1
2
3
4
Auto
Auto
Auto

Base

ClassDescription
.ui-gridBase class

Columns

ClassValue
.ui-grid--22
.ui-grid--33
.ui-grid--44
.ui-grid--autoauto

Subgrid

ClassDescription
.ui-grid--subgridsubgrid

Subgrid-rows

ClassDescription
.ui-grid--subgrid-rowssubgrid-rows

Subgrid-both

ClassDescription
.ui-grid--subgrid-bothsubgrid-both

Subgrid

Subgrid child 1
Subgrid child 2
Subgrid child 3
Card A

Short content.

Footer
Card B

Longer content that wraps to multiple lines to demonstrate row alignment.

Footer
Card C

Medium text.

Footer
A1
A2
A3
B1
B2
B3
<!-- Children inherit parent grid tracks for cross-item alignment. -->
<div class="ui-grid ui-grid--3">
  <div class="ui-grid--subgrid" style="grid-column: span 3">
    <div class="ui-bg-muted ui-p-2">Subgrid child 1</div>
    <div class="ui-bg-muted ui-p-2">Subgrid child 2</div>
    <div class="ui-bg-muted ui-p-2">Subgrid child 3</div>
  </div>
</div>
<div class="ui-grid ui-grid--3" style="grid-template-rows: auto 1fr auto">
  <div class="ui-grid--subgrid-rows" style="grid-row: span 3; border: 1px solid var(--ui-color-border); padding: var(--ui-space-2)">
    <strong>Card A</strong>
    <p>Short content.</p>
    <span class="ui-text-muted">Footer</span>
  </div>
  <div class="ui-grid--subgrid-rows" style="grid-row: span 3; border: 1px solid var(--ui-color-border); padding: var(--ui-space-2)">
    <strong>Card B</strong>
    <p>Longer content that wraps to multiple lines to demonstrate row alignment.</p>
    <span class="ui-text-muted">Footer</span>
  </div>
  <div class="ui-grid--subgrid-rows" style="grid-row: span 3; border: 1px solid var(--ui-color-border); padding: var(--ui-space-2)">
    <strong>Card C</strong>
    <p>Medium text.</p>
    <span class="ui-text-muted">Footer</span>
  </div>
</div>
<div class="ui-grid ui-grid--3" style="grid-template-rows: auto auto">
  <div class="ui-grid--subgrid-both" style="grid-column: span 3; grid-row: span 2">
    <div class="ui-bg-muted ui-p-2">A1</div>
    <div class="ui-bg-muted ui-p-2">A2</div>
    <div class="ui-bg-muted ui-p-2">A3</div>
    <div class="ui-bg-subtle ui-p-2">B1</div>
    <div class="ui-bg-subtle ui-p-2">B2</div>
    <div class="ui-bg-subtle ui-p-2">B3</div>
  </div>
</div>

Column Span

Span 2
1
1
1
Span 3
Span full
<!-- Span multiple columns with .ui-grid-col-span-{2,3,4,full} utilities. -->
<div class="ui-grid ui-grid--4">
  <div style="grid-column: span 2; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Span 2</div>
  <div class="ui-bg-subtle ui-p-2">1</div>
  <div class="ui-bg-subtle ui-p-2">1</div>
  <div class="ui-bg-subtle ui-p-2">1</div>
  <div style="grid-column: span 3; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Span 3</div>
  <div style="grid-column: 1 / -1; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Span full</div>
</div>

Row Span

Row span 2
1
2
3
4
<!-- Span multiple rows with .ui-grid-row-span-{2,3,full} utilities. -->
<div class="ui-grid ui-grid--3">
  <div style="grid-row: span 2; background: var(--ui-color-bg-muted); padding: var(--ui-space-2)">Row span 2</div>
  <div class="ui-bg-subtle ui-p-2">1</div>
  <div class="ui-bg-subtle ui-p-2">2</div>
  <div class="ui-bg-subtle ui-p-2">3</div>
  <div class="ui-bg-subtle ui-p-2">4</div>
</div>