Grid

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

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

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

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. Preserve gapless dividers and test the actual container width.