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.
• min-cols : the minium number of columns.
• max-cols : the maximum number of columns.
• gap : define the gap between grid cells. You can also define a horizontal gap with gap-x and a vertical gap with gap-y.

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-x` and a `gap-y` value, which space the elements vertically and horizontally, 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. Try to resize the example bellow to see the grid's behavior.