# 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](/framework/docs/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](/framework/docs/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](/framework/docs/columns) .

### Related

[Columns](/framework/docs/columns)[Flex](/framework/docs/flex)[Gap](/framework/docs/gap)[Layout](/framework/docs/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

GridColumn 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

GridColumn 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

GridColumn 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

GridColumn 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

GridRow 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

GridRow 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

GridGrid 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>

Previous

[Flex Arrange elements with flexible layouts and alignment options](/framework/docs/flex)

Next

[Aspect Ratio Maintain consistent proportions for elements regardless of their content](/framework/docs/aspect_ratio)