Layouts

Automatic positioning with Flex and Grid.

LVGL ships two automatic layout engines. Flex arranges children along a single axis (row or column), similar to CSS Flexbox, and is the fastest way to stack or space items. Grid places children into rows and columns of configurable size, comparable to CSS Grid, and suits dashboards or form-like screens where content aligns in both dimensions. Reach for Flex when one axis is enough; switch to Grid when cells need to line up across rows and columns.

Split

Split view with a draggable divider

Two panes separated by a divider you can drag to resize them.

A flex row holds a left pane (fixed width), a draggable divider, and a right pane that grows to fill the rest. Dragging the divider updates the left pane's width; the right pane follows automatically. A minimum width keeps either pane from collapsing. No custom widget is needed - just a flex container and a pointer event handler on the divider.

Vertical split view with a draggable divider

Two stacked panes separated by a divider you can drag to resize them.

Same idea as the horizontal split, but arranged in a flex column: a top pane (fixed height), a draggable divider, and a bottom pane that grows to fill the rest. Dragging the divider updates the top pane's height; the bottom pane follows. A minimum height keeps either pane from collapsing.