# Layouts (/examples/layouts)



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]

Split view with a draggable divider [#split-view-with-a-draggable-divider]

<LvglExampleBrief>
  Two panes separated by a divider you can drag to resize them.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_split" path="layouts/split/lv_example_split" />

Vertical split view with a draggable divider [#vertical-split-view-with-a-draggable-divider]

<LvglExampleBrief>
  Two stacked panes separated by a divider you can drag to resize them.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_split_vertical" path="layouts/split/lv_example_split_vertical" />

<DirectoryIndex />