Grid

The built-in grid tag — a flexible 12-column grid with spanning cells. The items/spans params, block-body cells, gap, grow, and a full attribute reference.

{% grid %} is a built-in tag for a flexible 12-column grid where cells can span a chosen number of columns. Use it when you want columns of different widths — a sidebar next to a wide main area, say. For an equal-width grid, reach for {% simplegrid %} instead.

Use it as {% grid %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'grid', …).

Cells with items

The simplest way to lay out cells of different widths is the items param — a |-separated list of cell texts — paired with spans, a comma-separated list of column spans (out of 12) for each cell. This form is self-closing (no block body).

Auto spans

A span of auto lets a cell take whatever width is left. Mix a fixed span with auto cells to pin one column and let the rest share the remainder.

Cells from the block body

Without items, each top-level block in the body becomes one cell — handy when a cell holds richer Markdown than a plain string. Set span to give every body cell the same column span, and gap to widen the gap between cells.

Grow and custom column count

grow lets the last row’s cells grow to fill the remaining width. columns changes the total number of tracks — here a 6-column grid with two 2-span cells that grow to fill.

With other components

Body cells are ordinary Markdown, so a grid is the natural frame for a dashboard row of rich cells. Each top-level block becomes one cell; set the grid-wide span to size them — here two half-width stat cards (span=6 of 12).

Attributes

Omit any attribute to take its Mantine default (columns 12, gap md, span auto).

CSS Selectors

Each grid carries data-aardvark-island="Grid" on its wrapper, and Mantine exposes its parts as mantine-Grid-* classes — target either to style it from your theme CSS.

[data-aardvark-island="Grid"] {
  /* style every grid on the page */
}

.mantine-Grid-root {
  /* the root part */
}

.mantine-Grid-inner {
  /* the inner part */
}

.mantine-Grid-col {
  /* the col part */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.