<aihio-grid> v1.0.0 Markdown for agents

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

Variants

Every value of the attributes that change how it looks. The values come from the schema.

`columns`

The most columns to show. Without it, as many 16rem columns as fit.

columns="2"

columns="3"

columns="4"

Examples

Each one rendered live, over the markup that produces it.

Three columns of cards

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

Customer portal

Billing sync

Ops migration

<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

Each one beside its fix, with what aihio lint says about it. The prompt fragment gives agents the same pairs, and the build fails if the linter stops catching one or a fix stops passing.

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-grid columns="6"><aihio-card></aihio-card></aihio-grid>

aihio lint reports

invalid-enum-attribute error invalid columns="6". Use columns="2". Expected one of: 2, 3, 4. Suggests columns="2"

<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

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

aihio lint reports

hand-rolled-layout warn <div> lays out its children with an inline display: grid. Use <aihio-grid>, which spaces them from the token scale and drops columns as it narrows. Suggests <aihio-grid>

…

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

API

Every attribute, property, method, and event the schema declares for aihio-grid.

Attributes

columns: one of 234; The most columns to show. Without it, as many 16rem columns as fit.
gap: one of tightsmmdlg default md; Spacing between rows and columns, from the spacing tokens.

Slots

default: The grid items, one per cell.

Composition

Allowed children: anything

Accessibility

What you have to provide, and what the component already does. The obligations with a rule are checked by aihio lint and by the dev build's console warnings.

Your 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.

Not machine-checkable: a judgment for the author.

Handled for you

Purely presentational: adds no role, no landmark, and no tab stop. Items keep source order, so reading and tab order match the visual order.

In patterns

Canonical compositions that use aihio-grid.

Data Card Grid