The Grid

<grid-l layout="min-cell-width:200px min-cols:2 max-cols:5 gap-x:2 gap-y:3">...</grid-l>

The grid component is a responsive grid.

To be responsive the grid need a min-cell-width attribute, this value will be the min width of each cell.

The grid will adapt its number of column to preserve this value.

You can define a min-cols and max-cols attribute to set a min/max number of columns.

When to use ?

You need the grid component when you want a nice responsive grid where you can control the cells width, the minimum and maximum number of columns.

For more complex layout grid you can check the area-l component.

Attributes

• min-cell-width : the minimum width of the grid cells (the grid will wrap to keep this value).
• min-cols: the minium number of columns.
• max-cols: the maximum number of columns.
• gap: define the gap between grid cells.
• gap-x: define the horizontal gap between grid cells.
• gap-y: define the vertical gap between grid cells.

min-cell-width

The min-cell-width attribute is mandatory, when set, the grid will automatically adjust its layout to ensure the grid cells are at least as wide as the specified value.

Try to resize to check the grid behavior.

min-cols

To ensure the grid maintains a minimum number of columns under any circumstances, simply use the min-cols attribute.

In this example, the grid is guaranteed to always have at least 3 columns, try to resize to check it out.

max-cols

Similarly, you can define the maximum number of columns the grid should have using the max-cols attribute.

In this example, the grid will never have more than 2 columns.

min-cols & max-cols

You can use both min-cols and max-cols to constraint your grid.

Here, the grid will never have less than 2 columns and never more than 3 columns.

gap

You can use the gap attribute to specify a gap between grid cells.

gap-x, gap-y

You can set an horizontal gap with gap-x and a vertical gap with gap-y just like this :