# <aihio-grid>

Layout primitive for a grid of equal columns, such as a grid of cards. Columns are never narrower than 16rem and drop away as the grid narrows, so it needs no breakpoints; columns caps how many there are.

Intents: `layout`, `container`.

## Attributes

- `columns` (`2` | `3` | `4`): The most columns to show. Without it, as many 16rem columns as fit.
- `gap` (`tight` | `sm` | `md` | `lg`): Spacing between rows and columns, from the spacing tokens. Default: `md`.

## Slots

- `default`: The grid items, one per cell.

## Accessibility obligations

- (warn) When the grid is a list of like items, such as project cards: Give it list semantics when the count matters to the reader: role="list" on aihio-grid and role="listitem" on each item.

## Examples

### Three columns of cards

Columns drop away as the grid narrows, with no breakpoints.

```html
<aihio-grid columns="3">
  <aihio-card>
    <aihio-card-header><aihio-card-title>Customer portal</aihio-card-title></aihio-card-header>
  </aihio-card>
  <aihio-card>
    <aihio-card-header><aihio-card-title>Billing sync</aihio-card-title></aihio-card-header>
  </aihio-card>
  <aihio-card>
    <aihio-card-header><aihio-card-title>Ops migration</aihio-card-title></aihio-card-header>
  </aihio-card>
</aihio-grid>
```

## Mistakes

### columns takes 2, 3, or 4. Six 16rem columns do not fit a typical content width, and the grid would drop them anyway.

Don't (aihio lint: invalid-enum-attribute):

```html
<aihio-grid columns="6"><aihio-card></aihio-card></aihio-grid>
```

Do:

```html
<aihio-grid columns="3"><aihio-card></aihio-card></aihio-grid>
```

### A hand-rolled grid ignores the spacing scale and squeezes its columns on narrow screens. Use aihio-grid.

Don't (aihio lint: hand-rolled-layout):

```html
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">…</div>
```

Do:

```html
<aihio-grid columns="3">…</aihio-grid>
```