Here are the basic CSS Grid properties:
Not all of them are used in this app or are used in a different way - you can find all the details below
To use CSS Grid, first you have to add "display: grid" to your container. You can also set it to "inline-grid". There is one more option, "display: subgrid" - useful if the elements parent has "display: grid" and you want your element and its content to be laid out according to the grid model.
Grid options:
width and height - pretty self explanatory, it's the height and width of the grid container.
columns and rows - full property names are "grid-template-columns" and "grid-template-rows". They specify how many columns and rows the grid will have. You can put there any value in px, %, rem, em, vh, vw or fr. Shorthand property is "grid-template". Here we are using evenly sized columns and rows with "repeat(number of columns/rows, size of column/row)" option, but in your own grid you can use named areas or different values for each column/row, for example:
"grid-template-columns: [first] 40px 1fr 20% [last];".
Yes, you can name very column and every row of your grid - pretty neat!
column and row size - you can specify the size of rows and columns, using px, %, rem, em, vh, vw or fr. We are using equal sizes, so it will affect every item the same way.
column gap and row gap - full property names are "grid-column-gap" and "grid-row-gap". They specify the size of the gutters between columns and rows. You can put there any value in px, %, rem, em, vh, vw or fr. Shorthand property is "grid-gap".
grid-auto-flow - Grid has pretty great auto-placement algorithm, and "grid-auto-flow" property defines how should it act. If you set it to "column" it will place new grid items in available columns or create a new one and place it there. If you set it to "row" it will place new grid items in available rows or create a new one and place it there. Last option, "dense", will try to fit any new items in available spotsand may also change the order of your grid items, so be careful with that.
Grid item options:
grid-column-start - specifies in which column the item will start. Given number refers to the start of the column. You can use integers to indicate specific column number, named area if you have one or "span integer" to tell the item to span over given number of columns.
grid-column-end - specifies in which column the item will end. Given number refers to the start of the column, so for example if you want an item to span over columns 1-3, you have to put 4 in there. You can use integers to indicate specific column number, named area if you have one or "span integer" to tell the item to span over given number of columns.
grid-row-start - specifies in which row the item will start. Given number refers to the start of the row. You can use integers to indicate specific row number, named area if you have one or "span integer" to tell the item to span over given number of rows.
grid-row-end - specifies in which row the item will end. Given number refers to the start of the row, so for example if you want an item to span over rows 1-3, you have to put 4 in there. You can use integers to indicate specific row number, named area if you have one or "span integer" to tell the item to span over given number of rows.
Other options:
CSS Grid offers a lot of more options than shown in this app. Options like "align-items", "justify-items", "align-content" and "justify-content" works pretty much the same as in Flexbox, so if you know how to use them you are good to go. There is also the "grid" property, in which you specify all of the above properties. It makes the code a lot less readable in my opinion, but feel free to use it.
Grid items also have some more properties, like "grid-area" that tells the item which named areas of your grid should it take or specify both columns and rows start and end, also there are of course "align-self" and "justify-self" - again, works the same way as with Flex items. You can also use short-hand properties "grid-column" and "grid-row" to specify both the start and the end of your item.