LVGL - Grid layout: how does it work?

[Dario-Ciceri]

I am trying to use grid layout but it doesn't seem to work, what am i doing wrong?
thank you.

[salimuddin07]

1. Grid layout requires proper row/column definitions

In your screenshot, you’ve enabled Layout → GRID for the panel.

LVGL grids need explicit row and column definitions (sizes) for widgets to snap correctly.

Right now, it seems you only have alignment settings (Grid column align, Grid row align, Grid row descriptor, Grid column descriptor), but you may not have defined how many rows/columns or their sizes.

Tip: Check the Grid row descriptor and Grid column descriptor values — each number corresponds to a row/column size. For example:

Grid row descriptor: 50 50
Grid column descriptor: 100 100

This creates a 2x2 grid with specific pixel sizes.

2. Widgets need a grid cell assigned

Each widget (like your Button) must be assigned to a grid cell.

In EEZ Studio, this is usually done under the widget’s Position and Size or Layout settings: set grid cell X and grid cell Y.

Without this, widgets may just stack or stay in default positions instead of snapping to the grid.

3. Flex/Grow settings can interfere

You currently have Flex grow = 0 and Flex main/cross/track places set.

If the panel is still configured with any flex behavior, it may override the grid layout.

Make sure the Flex settings are disabled when using a grid. LVGL usually prioritizes one layout type per container.

4. Check padding and spacing

Grid row/column spacing is currently set to SPACE_BETWEEN and descriptors like 45 45 45.

This could push your button outside the visible area if the panel is too small.

Try reducing spacing or using START alignment to verify the grid is working.

Quick checklist to make grid work

Set Layout → Grid on the container panel.

Define row and column descriptors explicitly (sizes or percentages).

Assign each widget to a specific grid cell (row/column index).

Disable conflicting Flex settings.

Adjust spacing and alignment to ensure widgets are visible.