# Grid

> A minimal auto-layout grid that stacks on small screens.

Page: https://pico.rusticstack.com/docs/layout/grid

`.grid` puts its children in equal columns. Below 768px the children stack in one column. From 768px up it uses `repeat(auto-fit, minmax(0%, 1fr))`, so the columns share the row equally, however many children there are.

**Example: Grid**

```html
<style>
  .grid > div {
    padding: 0.75rem;
    border: 1px solid color-mix(in oklab, var(--pico-primary-background) 35%, transparent);
    border-radius: var(--pico-border-radius);
    background: color-mix(in oklab, var(--pico-primary-background) 10%, transparent);
    text-align: center;
  }
</style>
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

> **Note**
>
> The example above is drawn at least 800px wide so the columns show side by side. On a narrow screen it scrolls sideways. In a frame narrower than 768px the columns stack.

## Mixed content

Any element can be a grid child: inputs, buttons, articles.

**Example: Grid with form controls**

```html
<form>
  <div class="grid">
    <input type="text" name="firstname" placeholder="First name" aria-label="First name" required />
    <input type="email" name="email" placeholder="Email" aria-label="Email" required />
    <button type="submit">Subscribe</button>
  </div>
</form>
```

## Limits

The grid is intentionally small. There are no column spans, offsets or per-breakpoint classes, and all columns are equal. For anything else, write CSS grid or flexbox in your own stylesheet. You can reuse the gap variables:

```css
.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
}
```

Children get `min-width: 0`, so long content shrinks instead of overflowing the column. A wide table or code block inside a cell needs [Overflow auto](/docs/layout/overflow-auto).

## Customization

| Variable | Default | Description |
| --- | --- | --- |
| `--pico-grid-column-gap` | `var(--pico-spacing)` | Gap between columns. |
| `--pico-grid-row-gap` | `var(--pico-spacing)` | Gap between rows. |

`.grid` stays global in the conditional build, so it works inside and outside a `.pico` scope.