Grid
The Grid system provides a flexible way to create both column-based and row-based layouts. It supports various column counts, column spans, and responsive behaviors to create complex layouts easily.
When to Use Grid
Use Grid inside
Layout
Layout
Primary container for organizing plugin content
The Layout is the content container inside a View. There should be exactly one layout per view. Its height is calculated automatically based on the device type, orientation, and whether a title bar is present. It can arrange content horizontally (layout--row) or vertically (layout--col), with alignment and stretch modifiers. For organizing content inside it, use flex, columns, or grid.
when you need a strict, grid-based layout. Grid gives you precise control over column count and span, so items align to a consistent rhythm and every element snaps to the same underlying grid.
Grid-Based Distribution
You define how many columns the grid has with grid--cols-{number}, and you can let individual cells span multiple columns with col--span-{number}. The result is a predictable, aligned layout where everything shares the same column structure. Ideal for Swiss-style or editorial designs where visual consistency matters.
Multiple Grids and Nesting
You can place multiple Grid components as direct children of Layout; Layout's modifiers (row/col, alignment, stretch) arrange those grids within the available space. Inside each grid cell, you can nest Flex Flex Arrange elements with flexible layouts and alignment options The Flex system provides utility classes for creating flexible layouts using Flexbox. It supports both row and column directions with various alignment, centering, and stretching options. for row or column flexibility within that cell. For example, a grid cell that stacks items vertically or aligns them horizontally.
Compared to Flex and Columns
Choose Grid when you need fixed column structure and spans. If you need content-sized flexibility (items that grow or shrink by content), use Flex. If you have lots of same-type data and want the system to handle column distribution and overflow, use Columns Columns Implement zero-config column layouts for content organization The Columns system handles lots of same-type data. You provide the items; it distributes them into columns and manages overflow, so you can display as few or as many items as there are in any given situation. For other layout needs, use Grid or Flex. .
Related
layout per view. Its height is calculated automatically based on the device type, orientation, and whether a title bar is present. It can arrange content horizontally (layout--row) or vertically (layout--col), with alignment and stretch modifiers. For organizing content inside it, use flex, columns, or grid.
Ways to Define the Grid
The grid system provides two ways to define column layouts:
-
Column Count: Set
grid--cols-{number}on the parent to create equal-width columns -
Column Spans: Set
col--span-{number}on individual columns to control their width
Column Count
Use grid--cols-{number} to specify any number of columns.
Here are examples with 4 and 3 columns:
Grid
Column Count
<div class="grid grid--cols-4">
<div>1/4</div>
<div>1/4</div>
<div>1/4</div>
<div>1/4</div>
</div>
<div class="grid grid--cols-3">
<div>1/3</div>
<div>1/3</div>
<div>1/3</div>
</div>Column Spans
Use col--span-{number} to make a column
span multiple grid columns. In a grid row, the sum of all column spans should equal the total number of grid columns.
For example, you might have spans of 1 and 2, or spans of 3, 6, and 2.
Grid
Column Spans
<div class="grid">
<div class="col--span-1">Span 1</div>
<div class="col--span-2">Span 2</div>
</div>
<div class="grid">
<div class="col--span-3">Span 3</div>
<div class="col--span-6">Span 6</div>
<div class="col--span-2">Span 2</div>
</div>Column Layouts
Use columns to create vertical layouts within the grid. Columns can be positioned and aligned using modifier classes.
Basic Column Layout
Use the col class to create vertical layouts.
Grid
Column Layout
<div class="grid">
<div class="col">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
</div>Column Positioning
Use col--{position} where position can be
start, center, or end to control vertical alignment:
Grid
Column Positioning
<div class="grid grid--cols-3">
<div class="col col--start">
<div>Item</div>
</div>
<div class="col col--center">
<div>Item</div>
</div>
<div class="col col--end">
<div>Item</div>
</div>
</div>Row Layouts
Use rows to create horizontal layouts within the grid. Rows can be positioned and aligned using modifier classes.
Basic Row Layout
Use the row class to create horizontal layouts.
Grid
Row Layout
<div class="grid">
<div class="row">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
</div>Row Positioning
Use row--{position} where position can be
start, center, or end to control horizontal alignment:
Grid
Row Positioning
<div class="grid grid--cols-1">
<div class="row row--start">
<div>Item</div>
</div>
<div class="row row--center">
<div>Item</div>
</div>
<div class="row row--end">
<div>Item</div>
</div>
</div>Grid Wrapping
Enable responsive wrapping based on a minimum column width using
grid--wrap.
Combine with grid--min-{size} to set the minimum track size.
Different Minimum Sizes
As the container shrinks, the grid reduces column count to respect the minimum size.
Grid
Grid Wrapping
<div class="grid grid--wrap grid--min-32">
<div class="col">Item 1</div>
<div class="col">Item 2</div>
<div class="col">Item 3</div>
<div class="col">Item 4</div>
<div class="col">Item 5</div>
<div class="col">Item 6</div>
<div class="col">Item 7</div>
<div class="col">Item 8</div>
</div>
<div class="grid grid--wrap grid--min-56">
<div class="col">Item 1</div>
<div class="col">Item 2</div>
<div class="col">Item 3</div>
<div class="col">Item 4</div>
<div class="col">Item 5</div>
<div class="col">Item 6</div>
<div class="col">Item 7</div>
<div class="col">Item 8</div>
</div>