Skip to content

Grid Layout

A fixed grid of cells — a row of KPIs, a 2×2 board of charts. Every cell is its own drop zone.

Layout widgets · widget type grid-layout · no data binding

Related: Container · Sidebar Layout · Section

Options

Option Values Default Description
Columns 1 or more 3 Number of columns. Changing it re-derives the cells
Rows 1 or more 2 Number of rows. Changing it re-derives the cells
Cell Spans Col span · Row span, per cell 1 × 1 Lets a cell cover several columns or rows
Column gap / Row gap Any CSS unit None Space between cells
Column template / Row template CSS grid template Empty Advanced override of the computed track sizes
Margin / Padding Any CSS unit None Space around and inside the grid
Box Style Sizing and spacing — The box around the grid

Notes

  • Set a cell's Col span or Row span to build irregular layouts without leaving the grid
  • A template takes precedence over Columns and Rows, so use it only when you need track sizes the counts cannot express
  • For free-form stacking rather than a matrix, use Container