Grid

Utility classes for column-based and row-based grids. Set the column count, span cells across columns, and change either at a breakpoint.

#

When to Use Grid

Use Grid inside Layout when you need a strict, grid-based layout. Grid gives you precise control over column count and span, so items align to a consistent rhythm and every element snaps to the same underlying grid.

#

Grid-Based Distribution

You define how many columns the grid has with grid--cols-{number}, and you can let individual cells span multiple columns with col--span-{number}. The result is a predictable, aligned layout where everything shares the same column structure. Ideal for Swiss-style or editorial designs where visual consistency matters.

#

Multiple Grids and Nesting

You can place multiple Grid components as direct children of Layout; Layout's modifiers (row/col, alignment, stretch) arrange those grids within the available space. Inside each grid cell, you can nest Flex for row or column flexibility within that cell. For example, a grid cell that stacks items vertically or aligns them horizontally.

#

Compared to Flex and Columns

Choose Grid when you need fixed column structure and spans. If you need content-sized flexibility (items that grow or shrink by content), use Flex. If you have lots of same-type data and want the system to handle column distribution and overflow, use Columns .

#

Related

Columns Flex Gap Layout
#

Ways to Define the Grid

Define a column layout in one of two ways:

  • Column Count: Set grid--cols-{number} on the parent to create equal-width columns
  • Column Spans: Set col--span-{number} on individual columns to control their width
#

Column Count

Use grid--cols-{number} to set the column count, from 1 to 12. A number above 12 has no class, so the grid keeps its default auto-fit template. Here are examples with 4 and 3 columns:

Col 1/4
Col 1/4
Col 1/4
Col 1/4
Col 1/3
Col 1/3
Col 1/3
TRMNL Logo Grid Column Count 
<div class="grid grid--cols-4">
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
</div>

<div class="grid grid--cols-3">
  <div>1/3</div>
  <div>1/3</div>
  <div>1/3</div>
</div>
#

Column Spans

Use col--span-{number} to make a column span multiple grid columns, from 1 to 12 like the column count. In a grid row, the sum of all column spans should equal the total number of grid columns. For example, you might have spans of 1 and 2, or spans of 3, 6, and 2.

Col Span 1
Col Span 2
Col Span 3
Col Span 6
Col Span 2
TRMNL Logo Grid Column Spans 
<div class="grid">
  <div class="col--span-1">Span 1</div>
  <div class="col--span-2">Span 2</div>
</div>

<div class="grid">
  <div class="col--span-3">Span 3</div>
  <div class="col--span-6">Span 6</div>
  <div class="col--span-2">Span 2</div>
</div>
#

Column Layouts

Use columns to create vertical layouts within the grid. Columns can be positioned and aligned using modifier classes.

#

Basic Column Layout

Use the col class to create vertical layouts.

Item 1
Item 2
Item 3
Item 4
TRMNL Logo Grid Column Layout 
<div class="grid">
  <div class="col">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </div>
</div>
#

Column Positioning

Use col--{position} where position can be start, center, or end to control vertical alignment:

Start
Center
End
TRMNL Logo Grid Column Positioning 
<div class="grid grid--cols-3">
  <div class="col col--start">
    <div>Item</div>
  </div>
  <div class="col col--center">
    <div>Item</div>
  </div>
  <div class="col col--end">
    <div>Item</div>
  </div>
</div>
#

Row Layouts

Use rows to create horizontal layouts within the grid. Rows can be positioned and aligned using modifier classes.

#

Basic Row Layout

Use the row class to create horizontal layouts.

Item 1
Item 2
Item 3
Item 4
TRMNL Logo Grid Row Layout 
<div class="grid">
  <div class="row">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </div>
</div>
#

Row Positioning

Use row--{position} where position can be start, center, or end to control horizontal alignment:

Start
Center
End
TRMNL Logo Grid Row Positioning 
<div class="grid grid--cols-1">
  <div class="row row--start">
    <div>Item</div>
  </div>
  <div class="row row--center">
    <div>Item</div>
  </div>
  <div class="row row--end">
    <div>Item</div>
  </div>
</div>
#

Grid Wrapping

Enable responsive wrapping based on a minimum column width using grid--wrap. Combine with grid--min-{size} to set the minimum track size.

#

Different Minimum Sizes

As the container shrinks, the grid reduces column count to respect the minimum size.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
TRMNL Logo Grid Grid Wrapping 
<div class="grid grid--wrap grid--min-32">
  <div class="col">Item 1</div>
  <div class="col">Item 2</div>
  <div class="col">Item 3</div>
  <div class="col">Item 4</div>
  <div class="col">Item 5</div>
  <div class="col">Item 6</div>
  <div class="col">Item 7</div>
  <div class="col">Item 8</div>
</div>

<div class="grid grid--wrap grid--min-56">
  <div class="col">Item 1</div>
  <div class="col">Item 2</div>
  <div class="col">Item 3</div>
  <div class="col">Item 4</div>
  <div class="col">Item 5</div>
  <div class="col">Item 6</div>
  <div class="col">Item 7</div>
  <div class="col">Item 8</div>
</div>
#

Removing the Gap

A grid separates its columns by the screen's gap. Add grid--no-gap to close it, so tiles meet edge to edge and read as one band. Size and orientation prefixes work on it like any other grid modifier (portrait:grid--no-gap), and a Gap utility sets a different gap rather than none.

Mon
Tue
Wed
Thu
Mon
Tue
Wed
Thu
TRMNL Logo Grid grid--no-gap 
<div class="grid grid--cols-4 grid--no-gap">
  <div class="col">Mon</div>
  <div class="col">Tue</div>
  <div class="col">Wed</div>
  <div class="col">Thu</div>
</div>