> This page is for Flowkit CSS Framework, version v1.
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Grid layout

> Grid layout system in Webflow CSS Framework using responsive combo classes.

The base class Grid Layout defines the element as a grid. By default, it creates a 2-column grid layout with no spacing.

Grid Layout can be extended with various combo class modifiers that adjust the layout's spacing, column count, alignment, and responsiveness. You can combine these modifiers to configure the grid layout to your needs.

Style selector structure:

Grid Layout (Optional) Responsive Column Modifier (Optional) Spacing Modifier (Optional) Alignment Modifier

Check examples how to mix combo-classes:

Grid Layout Desktop 9 Column Tablet 3 Column Mobile Landscape 1 Column Grid Gap MD X Center ![Grid](/_fern-img/d4043d660edf0b92accb25f3ddf13e789f5f9b4ff148c45b6c0d7c6091eba8df.webp)

---

## Spacing Modifiers

Spacing is following t-shirt size coding with 2-letter abbreviations (e.g. `SM`, `MD`, `XL`).

Style selector structure:
Grid Layout Grid Gap `Size`

Options: `XXS`, `XS`, `SM`, `MD`, `LG`, `XL`, `XXL`

Example: Grid Layout Grid Gap MD

---

## Alignment Modifiers

These modifiers set alignment for all child elements inside the grid.

Style selector structure:
Grid Layout `X or Y` `Position`

Options: `X Left`, `X Center`, `X Right`, `Y Top`, `Y Center`, `Y Bottom`

Example: Grid Layout X Center Y Bottom

---

## Responsive Column Modifiers

You can define unique behavior for every breakpoint by adding the combo class for the breakpoint you want to target.

Style selector structure:
Grid Layout `Breakpoint` `Count` Column Grid

Options:

| Breakpoint         | Count      |
| ------------------ | ---------- |
| `Desktop`          | `1` – `12` |
| `Tablet`           | `1` – `6`  |
| `Mobile Landscape` | `1` – `4`  |
| `Mobile Portrait`  | `1` – `4`  |

Example: Grid Layout Tablet 3 Column Grid