The Grid

...

The grid component is a responsive grid without breakpoints.

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`/`max-cols` attribute to set a min/max number of columns.

min-cell-width: define the minimum width of the grid cells.
gap: define the gap between grid cells
min-cols: the minium number of columns
max-cols: the maximum number of columns

Examples

In this simple example, you have a min-cell-width of 150px. So, if you resize the window, you will see the number of columns changing to keep the cell width bigger than 150px.

Here you have a `gap` value, which space the elements and a `max-cols` value which define the maximum numbers of columns allowed

If you want to define a minimum numbers of columns, you just have to set a `min-cols` value. Here, we have only 2 elements, but the grid have 3 columns thanks to the `min-cols` value

You can define `min-cell-width`, `min-cols` and `max-cols` on the same grid. In this example, the grid will never have more than 3 columns and never less than 2 columns, unless if with 2 columns the cells are smaller than 250px. Try to resize the example bellow to see the grid's behavior.