How to specify spacing between cells in grid layout?

Vaadin 6 / 7 / 8 Framework UI
1

I use some standart code to create 3x2 grid layout matrix. Then I put content blocks in cells and set the spacing between cells using
setSpacing(true)
:

       GridLayout summaryInfo = new GridLayout(3, 2);
        summaryInfo.setSizeFull();
        summaryInfo.setSpacing(true);
        content.addComponent(summaryInfo);

As a result I have something like this:

But I`d like to have more space between cells, so the result will be like that:

Unfortunately I haven’t found any methods to specify spacing between cells. And I haven’t find appropriate CSS classes to specify that size also. (For example for horizontal or vertical Laoyout I cat specify this space in class .
v-spacing
 by setting width and height parameters). Can anyone give solution?

2

How you specify the amount of spacing in GridLayout is a bit unorthodox to say the least.

In your theme add the following CSS rule:

.v-gridlayout-spacing-on {
    width: 20px;
    height: 20px;
}

The width controls the amount of horizontal spacing between the cells and the height the amount of vertical spacing.

3

It works! Thanks a lot!

4

John Ahlroos:
How you specify the amount of spacing in GridLayout is a bit unorthodox to say the least.

In your theme add the following CSS rule:

.v-gridlayout-spacing-on {
    width: 20px;
    height: 20px;
}

The width controls the amount of horizontal spacing between the cells and the height the amount of vertical spacing.

Trying to set the GridLayout height between the cell with the .v-gridlayout-spacing-on in CSS file.But it fails to adjust the grid layout. I am using GridLayout of Vaadin 8 and still facing this problem to reduce the space between the row. Appreciate if any one cld help. i have already posted this question in forum : https://vaadin.com/forum/thread/17156208/vaadin-8-grid-layout-remove-excess-space-between-row-and-column