CSS grid for dummies

Intent and purposes

We intend on using CSS grid to show our collection elements. This is a quick refresh for qualified dev, a starting point for idiots.

CSS properties

• grid-template: allows to handle amount of rows and cols
  • Works with fr for fractions
  • Works with repeat(x, thing to repeat) if there's a need for it
  • Columns and rows can be given the minmax(min, max) property to handle... minimum and maximum
• grid can also have gaps, using grid-gap: rowGap columnGap
• an item can take more than one cell
  • multiple row: grid-row-start: row nb and grid-row-end: row nb (remember that it ends at the begining of the row you indicate, not the beginning of the one after)
    • or you can be a decent human being and use grid-row: start / end or even grid-row: start / span X
  • Il can also take an area using grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end