# Grid

`Grid` arranges direct children in equal-width columns and equal-height rows, with optional internal dividers and height growth.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<script>
  import { Grid, Section } from "@dg/ui";
</script>

<Section padding="none" gap="none">
  <Grid columns={2} divided>
    <article>
      <h2>Artworks</h2>
      <p>Browse the collection.</p>
    </article>
    <article>
      <h2>Archive</h2>
      <p>Read past projects.</p>
    </article>
  </Grid>
</Section>

<style>
  article {
    padding: var(--layout-padding-block) var(--layout-padding-inline);
  }
</style>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the grid div. A wrapper around it is the query container, so the column count follows the grid's own width, including in sidebars and embedded panels.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- Cells in the same row share their height. A single column, whether set by `columns={1}` or by a narrow container, keeps each cell's natural height; override `grid-auto-rows` through `style` for another rhythm.
- In a `divided` grid the dividers are the only cell lines: a `Card` cell drops its own border and takes the layout inset (`--layout-padding-*`) instead of the content inset.
- Compose a divided grid in `Section padding="none" gap="none"` so its dividers reach the frame and its cells align with the shell gutter. Give custom cells the same layout inset.
- Choose a positive integer for columns. Each direct child owns its inset; divided cells use an inset focus clearance so their keyboard indicator is not clipped.

## Parameters

| Name       | Type      | Default     | Description                                                                                                                                 |
| ---------- | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `columns`  | `number`  | `2`         | Equal-width columns. The grid switches to one column when it is 40rem wide or narrower.                                                     |
| `fill`     | `boolean` | `false`     | Grow to occupy available height inside a flex-column parent.                                                                                |
| `divided`  | `boolean` | `false`     | Separators at --border-width between adjoining cells; no outer border or padding is added.                                                  |
| `class`    | `string`  | `""`        | Additional classes on the grid.                                                                                                             |
| `children` | `Snippet` | `undefined` | Direct children become cells. Rows have equal heights. `Card` cells of a divided grid take the layout inset; other cells own their padding. |

## Accessibility

DOM order remains reading and keyboard order. Cells stack when the grid itself is 40rem wide or narrower, whatever the viewport. Divided grids clip separators at the outer edge; direct cell controls keep their focus outline inside it.

For content-driven tracks rather than equal columns, use a documented native CSS override through the forwarded style, as in the [collection recipe](../guides/recipe-collection.md#container-sizing). Preserve gapless dividers and test the actual container width.