Grid Layout¶
The Grid Layout widget divides its space into a fixed grid of cells, and each cell takes its own widgets. It is the quickest way to build a dashboard: a row of four KPI cards, or a two-by-two board of charts. Cells can span several columns or rows, so one wide chart can sit above two narrow ones.
See also Container for a simple row or column, Sidebar Layout for a page shell, and Section for the cards that often go in the cells.
Using it¶
Drop a Grid Layout onto the page and set Columns and Rows. For a row of three KPI cards, use three columns and one row, then drag a Section into each cell. To make one cell wider, click it in the preview under Cell Spans and set its Col span to 2. Adjust Column gap and Row gap to space the cells out.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Columns | 1–12 | 3 | How many columns the grid has. Disabled while a Column template is set |
| Rows | 1–12 | 2 | How many rows the grid has. Disabled while a Row template is set |
| Column template / Row template | A CSS grid template, for example 100px 1fr auto |
Empty | Advanced: sets each column's or row's size directly |
| Cell Spans | Col span · Row span, per cell | 1 × 1 | Click a cell in the preview to select it, then set how many columns or rows it covers. Reset clears all spans |
| Column gap / Row gap | Any CSS unit | The theme's extra-small spacing | Space between the cells |
| Align items / Justify items | Start · Center · End, and others | Not set | How widgets sit inside their cells |
| Padding / Margin | Any CSS unit | None | Space inside and around the grid |
| Grid Style | CSS | Empty | Any other CSS for the grid |
| Box Style | Sizing and spacing | — | The box around the grid |
Tips¶
A few things to keep in mind:
- Use Col span and Row span to build uneven layouts without leaving the grid.
- A template wins over Columns and Rows. Use it only when you need sizes the counts cannot express, such as a fixed-width first column.
- For simple stacking rather than a grid, use Container.