yml-layout: Rework the margins

This PR rework the yml-layout as dedicated style in order to improve the alignments between the components.

It's a first step to handle properly the resize of all the components.

• It mostly uses gap property and a padding on the main component.
• Sub components don't use at all any padding/margin.

Row/cols:

Before: Including 4 levels (row/col/row/col)

After: Notice that every gaps have the same size

Grid

Before: Notice that the gaps could have different size.

After: Notice that every gaps have the same size.

Tabs

Before

After