Hesoyam

Grid

Two-dimensional layout with visible guides. Wrap every Grid in GridSystem.

Empty grid

columns and rows are numbers. height preserve-aspect-ratio keeps the cell math square.


        

          1
          
          <GridSystem :guide-width="1" unstable_use-container>
        

          2
          
            <Grid :columns="5" :rows="2" height="preserve-aspect-ratio" />
        

          3
          
          </GridSystem>

Cells

GridCell auto-flows when column and row are omitted.

1
2
3
4
5
6

        

          1
          
          <GridSystem :guide-width="1" unstable_use-container>
        

          2
          
            <Grid :columns="3" :rows="2">
        

          3
          
              <GridCell>1</GridCell>
        

          4
          
              <GridCell>2</GridCell>
        

          5
          
              <GridCell>3</GridCell>
        

          6
          
              <GridCell>4</GridCell>
        

          7
          
              <GridCell>5</GridCell>
        

          8
          
              <GridCell>6</GridCell>
        

          9
          
            </Grid>
        

          10
          
          </GridSystem>

Solid cells

solid paints a background so guides do not show through a tile. column and row accept CSS grid lines such as 1/3.

1 + 2
3
4
5 + 6 

        

          1
          
          <GridSystem :guide-width="1" unstable_use-container>
        

          2
          
            <Grid :columns="3" :rows="2">
        

          3
          
              <GridCell column="1/3" row="1" solid>1 + 2</GridCell>
        

          4
          
              <GridCell>3</GridCell>
        

          5
          
              <GridCell>4</GridCell>
        

          6
          
              <GridCell column="2/4" row="2" solid>5 + 6</GridCell>
        

          7
          
            </Grid>
        

          8
          
          </GridSystem>

Responsive

columns, rows, and cell spans can be { sm, md, lg }. Breakpoints are 600px and 960px. unstable_use-container measures the wrapper, not the viewport.

1
2
3
4
5
6

        

          1
          
          <GridSystem unstable_use-container>
        

          2
          
            <Grid
        

          3
          
              :columns="{ sm: 1, md: 2, lg: 3 }"
        

          4
          
              :rows="{ sm: 6, md: 3, lg: 2 }"
        

          5
          
            >
        

          6
          
              <GridCell>1</GridCell>
        

          7
          
              <GridCell>2</GridCell>
        

          8
          
              <GridCell>3</GridCell>
        

          9
          
              <GridCell>4</GridCell>
        

          10
          
              <GridCell>5</GridCell>
        

          11
          
              <GridCell>6</GridCell>
        

          12
          
            </Grid>
        

          13
          
          </GridSystem>

Responsive spans

A solid cell can change its line range per breakpoint.

1 + 2
3
4
5 + 6 

        

          1
          
          <GridCell
        

          2
          
            :column="{ sm: '1', md: '1/3' }"
        

          3
          
            :row="{ sm: '1/3', md: 1 }"
        

          4
          
            solid
        

          5
          
          >
        

          6
          
            1 + 2
        

          7
          
          </GridCell>

Hidden guides

hide-guides is row or column — not both. Hiding both means a plain Tailwind grid is enough.


        

          1
          
          <Grid
        

          2
          
            :columns="12"
        

          3
          
            :rows="3"
        

          4
          
            height="preserve-aspect-ratio"
        

          5
          
            hide-guides="row"
        

          6
          
          />

Overlapping cells

Explicit line ranges can stack. Later cells paint above earlier ones.

1
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3
4 

        

          1
          
          <Grid :columns="12" :rows="3">
        

          2
          
            <GridCell column="1/3" row="1/3" solid>1</GridCell>
        

          3
          
            <GridCell column="2/4" row="2/4">2</GridCell>
        

          4
          
            <GridCell column="7/12" row="1/-1" solid>3</GridCell>
        

          5
          
            <GridCell column="11/13" row="1/3" solid>4</GridCell>
        

          6
          
          </Grid>

Crosses

GridCross marks an intersection. column and row are 1-based guide indices, including the trailing edge.

1
2
3
4
5
6

        

          1
          
          <Grid :columns="3" :rows="2">
        

          2
          
            <GridCross :column="1" :row="1" />
        

          3
          
            <GridCross :column="4" :row="1" />
        

          4
          
            <GridCross :column="4" :row="3" />
        

          5
          
            <GridCross :column="1" :row="3" />
        

          6
          
            <GridCell>1</GridCell>
        

          7
          
          </Grid>

Dashed guides

Content here

        

          1
          
          <GridSystem dashed-guides :guide-width="1" unstable_use-container>
        

          2
          
            <Grid :columns="1" :rows="1">
        

          3
          
              <GridCross :column="1" :row="1" />
        

          4
          
              <GridCross :column="2" :row="1" />
        

          5
          
              <GridCross :column="2" :row="2" />
        

          6
          
              <GridCross :column="1" :row="2" />
        

          7
          
              <GridCell>Content here</GridCell>
        

          8
          
            </Grid>
        

          9
          
          </GridSystem>

Debug

debug outlines the system and every cell so span math is visible while you author.

1
2
3
4
5
6

        

          1
          
          <GridSystem debug :guide-width="1" unstable_use-container>
        

          2
          
            <Grid :columns="3" :rows="2">
        

          3
          
              <GridCell>1</GridCell>
        

          4
          
            </Grid>
        

          5
          
          </GridSystem>

Best practices

  • Use Grid when the guides are part of the design — marketing bands, docs landings, feature tiles. Plain cards and lists should stay on Tailwind grid.
  • Always wrap in GridSystem. Docs and embeds should set unstable_use-container so sm / md / lg follow the wrapper width.
  • Set columns and rows at all three breakpoints when the layout reflows. One number is fine for a fixed frame.
  • solid on a cell that needs an opaque tile. Without it, guides draw through the content.
  • Do not nest Grid more than one level. Guide overlap turns into noise and the cell math breaks.
  • GridPage is a full-viewport shell (min-h-dvh). Keep it off this docs canvas; use it as a page root.
  • Guides are decorative. Put semantics on the cell content. If a cell is tappable, give it its own focus ring.