# Grid (/examples/layouts/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 [#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 [#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 [#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 [#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 [#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 [#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 [#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 [#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.