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

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

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)

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

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

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

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.