> For the complete documentation index, see [llms.txt](https://www.pollen.style/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.pollen.style/modules/grid.md).

# Grid

## Page Grid

A configurable grid designed to be used for page containers, with a main center column for content and gutters on each side. The main center column will expand until it reaches a max-width, at which point it will remain constrained and centered at that width.

Give all children of the grid a `--grid-page-main` column value (equal to `2/3`) to place them in the main content area. Easily "break out" of the page grid for full-width panels by giving a child a `1 / -1` column placement

| Property           | Applies to              |
| ------------------ | ----------------------- |
| `--grid-page`      | `grid-template-columns` |
| `--grid-page-main` | `grid-column`           |

![](/files/OmabPl2whJk6EBO1KEXW)

```css
.page {
  display: grid;
  grid-template-columns: var(--grid-page);
}

.page > * {
  grid-column: var(--grid-page-main);
}

.page > .fullwidth {
  grid-column: 1 / -1;
}
```

### Configuration

Each aspect of the page grid is configurable with CSS variables. Set them either on the `:root` pseudo-element to apply globally, or on an individual page grid to apply just for that element.

| Property             | Default           | Description                                                          |
| -------------------- | ----------------- | -------------------------------------------------------------------- |
| `--grid-page-width`  | `var(--width-xl)` | Max width of the main content area                                   |
| `--grid-page-gutter` | `5vw`             | Width of the page gutters until the content area max with is reached |

```css
:root {
 --grid-page-gutter: var(--size-10);
 --grid-page-width: var(--width-lg);
 }
```

## Grid Template

Helpers for quickly setting common grid templates

| Property Group | Applies to                                       |
| -------------- | ------------------------------------------------ |
| `--grid-`      | `grid-template-columns` and `grid-template-rows` |

![](/files/EibVWQfMcOCrqNIHt5mj)

```css
.grid {
  display: grid;
  grid-template-columns: var(--grid-12);
}
```

| Property    | Value                        |
| ----------- | ---------------------------- |
| `--grid-2`  | `repeat(2, minmax(0, 1fr))`  |
| `--grid-3`  | `repeat(3, minmax(0, 1fr))`  |
| `--grid-4`  | `repeat(4, minmax(0, 1fr))`  |
| `--grid-5`  | `repeat(5, minmax(0, 1fr))`  |
| `--grid-6`  | `repeat(6, minmax(0, 1fr))`  |
| `--grid-7`  | `repeat(7, minmax(0, 1fr))`  |
| `--grid-8`  | `repeat(8, minmax(0, 1fr))`  |
| `--grid-9`  | `repeat(9, minmax(0, 1fr))`  |
| `--grid-10` | `repeat(10, minmax(0, 1fr))` |
| `--grid-11` | `repeat(11, minmax(0, 1fr))` |
| `--grid-12` | `repeat(12, minmax(0, 1fr))` |