Grid

The Grid system provides a flexible way to create both column-based and row-based layouts. It supports various column counts, column spans, and responsive behaviors to create complex layouts easily.

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

The grid system provides two ways to define column layouts:

  • 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 specify any number of columns. 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. 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>