> This page is for Flowkit CSS Framework, version v2 (default).
> 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.

## Grid system

The grid system provides a flexible layout foundation using CSS Grid. Basic grid classes come with built-in responsive behavior that automatically adjusts the layout based on screen size.

### Basic grid classes

Basic grid classes with base column configurations:

* grid\_1-col
* grid\_2-col
* grid\_3-col
* grid\_4-col
* grid\_5-col
* grid\_6-col
* grid\_9-col
* grid\_12-col

### Responsive behavior

These responsive behaviors are built into the grid classes and automatically adjust the layout based on screen size without requiring additional responsive modifiers.

| Grid Class   | Desktop    | Tablet    | Mobile-L  | Mobile   |
| ------------ | ---------- | --------- | --------- | -------- |
| grid\_1-col  | 1 column   | 1 column  | 1 column  | 1 column |
| grid\_2-col  | 2 columns  | 2 columns | 1 column  | 1 column |
| grid\_3-col  | 3 columns  | 3 columns | 2 columns | 1 column |
| grid\_4-col  | 4 columns  | 2 columns | 1 column  | 1 column |
| grid\_5-col  | 5 columns  | 3 columns | 2 columns | 1 column |
| grid\_6-col  | 6 columns  | 3 columns | 2 columns | 1 column |
| grid\_9-col  | 9 columns  | 3 columns | 2 columns | 1 column |
| grid\_12-col | 12 columns | 3 columns | 2 columns | 1 column |

Default behavior can be adjusted using responsive combo classes:

grid\_3-col tablet-1-col

---

## Spacing modifiers

Class structure:
grid\_`columns`-col gap-`size`

Size options: `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`

Example: grid\_3-col gap-medium

---

## Alignment modifiers

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

Class structure:
grid\_`columns`-col is-`X or Y`-`position`

Available combo classes:

* is-x-left
* is-x-center
* is-x-right
* is-y-top
* is-y-center
* is-y-bottom

Example: grid\_3-col is-x-center is-y-bottom