# 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. Fixed-pixel 3x3 grid [#fixed-pixel-3x3-grid] Fill a 3x3 grid of fixed-size cells with stretched buttons. A 300x220 container is given three 70 px columns and three 50 px rows via `lv_obj_set_style_grid_column_dsc_array` and `lv_obj_set_style_grid_row_dsc_array`, then switched to `LV_LAYOUT_GRID`. Nine buttons are placed one per cell with `LV_GRID_ALIGN_STRETCH` on both axes so each button fills its cell and carries a `cX, rY` label. Cell alignment and spans [#cell-alignment-and-spans] Mix per-cell alignments with two-cell spans inside a 3x3 grid. A 300x220 container uses three 70 px columns and three 50 px rows. Five `LV_SIZE_CONTENT` children are placed via `lv_obj_set_grid_cell`: the top row mixes `LV_GRID_ALIGN_START`, `LV_GRID_ALIGN_CENTER`, and `LV_GRID_ALIGN_END` alignments, a child at column 1 spans two columns with `LV_GRID_ALIGN_STRETCH`, and a child at row 1 spans two rows the same way. Grid free units (FR) [#grid-free-units-fr] Distribute leftover space between grid tracks using FR units. A 300x220 container uses three columns (60 px, FR(1), FR(2)) and three rows (50 px, FR(1), 50 px). Nine child objects fill the cells with `LV_GRID_ALIGN_STRETCH`. Pixel tracks take their fixed size first; the remaining space is divided between FR tracks in proportion to their weights. Track placement in extra space [#track-placement-in-extra-space] Place nine grid cells with space-between columns and bottom-aligned rows. A 300x220 container defines three 60 px columns and three 45 px rows that do not fill the full size. `lv_obj_set_grid_align` is called with `LV_GRID_ALIGN_SPACE_BETWEEN` for columns and `LV_GRID_ALIGN_END` for rows, so leftover horizontal space is distributed between the three columns and the rows collapse against the bottom of the container. Animated grid row and column gaps [#animated-grid-row-and-column-gaps] Animate `pad_row` and `pad_column` of a 3x3 grid on two timescales. A 300x220 container uses three 60 px columns and three 45 px rows, with nine stretched children labeled by cell coordinates. Two `lv_anim_t` instances loop `pad_row` and `pad_column` between 0 and 10 with `LV_ANIM_REPEAT_INFINITE`: row gap takes 500 ms per direction while column gap takes 3000 ms, so the grid breathes on two independent cycles. RTL grid column order [#rtl-grid-column-order] Populate a 3x3 grid under right-to-left base direction. A 300x220 container has `LV_BASE_DIR_RTL` applied before its column and row descriptors (three 60 px and three 45 px tracks). Nine stretched children are placed into columns 0, 1, 2 in loop order, but the RTL base direction maps column 0 to the rightmost track, so the cells read right-to-left.