Grid

A 2D cell-based layout that places children into explicit rows and columns, analogous to CSS Grid. Use it when content must align across both axes, such as dashboards or forms.

Grid alignment of tracks

Place column and row tracks within free space.

Track sizes are smaller than the container, so leftover space is distributed by style_grid_column_align and style_grid_row_align. Here columns use space_between to push them to the edges, while rows align to end and stick to the bottom.

Grid cell span and alignment

Position cells inside their track and span multiple tracks.

The first row uses different style_grid_cell_x_align / y_align values to show start, center, and end placement within a cell. Two further items use column_span and row_span to occupy multiple tracks at once, demonstrating how a single child can cover several cells of the grid.

Grid descriptors

Define fixed-size column and row tracks.

style_grid_column_dsc_array and style_grid_row_dsc_array list the size of each track in pixels. The example uses three 70px columns and two 44px rows, and each child positions itself with style_grid_cell_column_pos and style_grid_cell_row_pos.

Grid FR units

Share remaining space across tracks with fr() weights.

The first column has a fixed 60px size; the next two columns use fr(1) and fr(2) and split the remaining width in a 1:2 ratio. The same idea applies to rows: the first row is fixed at 44px and the second uses fr(1) to absorb the leftover height.

Grid ignore layout

Detach an item from grid placement.

Four normal grid items occupy their cells while a fifth item with ignore_layout="true" is skipped by the grid. The detached item keeps its manual x/y position and does not displace any of the placed cells, useful for floating badges or overlays.

Grid internal padding

Set horizontal and vertical gaps between grid cells.

style_pad_column inserts space between columns and style_pad_row inserts space between rows. The two are independent, so column gaps and row gaps can differ — here columns are flush together while rows have a large vertical gap.

Grid RTL

Reverse column order with style_base_dir.

Both grids declare the same three columns and the same children. Setting style_base_dir to rtl on the second grid flips the column order, so cell 0 appears on the right without changing how children are referenced or ordered in XML.

Grid sub-grid

Nest a grid inside a cell of a parent grid.

The outer grid defines 3x2 tracks, and an inner grid occupies a 2x2 area within it. The inner grid intentionally omits its own column/row descriptors so it inherits the parent tracks, keeping its cells aligned with the outer grid's columns and rows.