How to equally fill a grid

How-to
1

Description

What MCU/Processor/Board and compiler are you using?

MAC + CLANG

What LVGL version are you using?

9.3.0

What do you want to achieve?

I want that the buttons are equally filling out the space. The spaces between the buttons shall be the same as the gap to the container around. This is the example from LVGL. I reduced the size of the container to see how it behaves but then I realised that the buttons are not nice spaced in this containers and tried to fix it but failed. BTW is there anywhere a nice tutorial about that?

What have you tried so far?

I tried out the Grid align options but they don’t do anything.

Code to reproduce

static int32_t col_dsc[] = {70, 70, 70, LV_GRID_ALIGN_SPACE_BETWEEN, LV_GRID_TEMPLATE_LAST};
static int32_t row_dsc[] = {50, 50, 50, LV_GRID_ALIGN_SPACE_BETWEEN, LV_GRID_TEMPLATE_LAST};

/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
lv_obj_set_style_margin_all(cont, 0, 0);
lv_obj_set_style_pad_all(cont, 5, 0);
lv_obj_set_size(cont, 250, 200);
lv_obj_center(cont);
lv_obj_align(cont, LV_ALIGN_CENTER, 0, 0);
lv_obj_set_layout(cont, LV_LAYOUT_GRID);

lv_obj_t * label;
lv_obj_t * obj;

uint8_t i;
for(i = 0; i < 9; i++) {
    uint8_t col = i % 3;
    uint8_t row = i / 3;

    obj = lv_button_create(cont);
    lv_obj_set_size(obj, 70, 50);
    /*Stretch the cell horizontally and vertically too
     *Set span to 1 to make the cell 1 column/row sized*/
     lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1, LV_GRID_ALIGN_STRETCH, row, 1);

    label = lv_label_create(obj);
    lv_label_set_text_fmt(label, "c%d, r%d", col, row);
    lv_obj_center(label);
}

Screenshot and/or video

2

This is how it looks like at the moment. Should this function not align it in the center?

lv_obj_center(obj);

3

Ok I got it. After removing from this the Row & Column definition:

LV_GRID_ALIGN_SPACE_BETWEEN

And adding this

lv_obj_set_grid_align(cont, LV_GRID_ALIGN_CENTER, LV_GRID_ALIGN_CENTER);

It worked fine as expected.