The Grid

<grid-n min-cell-width="100px" min-cols="3" max-cols="5" gap="3"> ... </grid-n>

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.

<grid-n min-cell-width="150px">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
</grid-n>

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

<grid-n min-cell-width="120px" max-cols="4" gap="2">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
</grid-n>

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

<grid-n min-cell-width="150px" min-cols="3" gap="2">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
</grid-n>

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.

<grid-n min-cell-width="150px" min-cols="2" max-cols="4" gap="2">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
  <img src="/static/images/chocolate.png">
</grid-n>