CSS Grid Primer
CSS Grid confused me for a really long time until I got the hang of it and it became my #1 used tool. So here's a little primer on how to use it in your everyday life!
When you use display: grid on an element, it changes the display mode to treat contained elements like they're arranged in a regular grid. By default, this grid is one column wide, and all elements in it will be stacked on top of each other. However, by adding more definition to the grid, we can make much more interesting arrangements.
For example, let's think about a common indieweb blog layout: header, 1-2 side columns, center section, footer.
Header
Left
Main
Right
Footer
So, the properties that you really need to know about for the container element are are:
display- what you use to set an element to use the grid display typegrid-template-columns- sets the widths for the columns in your gridgrid-template-rows- sets the heights for the rows in your gridgrid-template-areas- allows you to label (and merge) grid squares for reference in the child elements