Instructions: Click on the "CSS" button in each example to see the wonderful code behind the example.
CSS has always been used to layout web pages, but was never very good at it. Flexbox helped out, but it's intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together).
Let's open up these pages in Firefox
Nothing yet. We need to specify our grid-template
We can give each column fixed units
We can also use a new unit that will take up a fraction of the grid.
Your turn - check out the grid in the 'Inspector' area of your firefox devtools
Thus far, our grid rows have been implicity set. But you can also explicitly set them using this property.
Your turn - How do you add space between only rows? What about between only columns?
Note that this will change the position of elements and therefore may not be great for accessibility.
auto-fit allows us to make our grid adaptive
The addition of
minmax() makes things responsive
grid-template-areas in conjunction with the
grid-area to name your areas