{the jump}

Intro to CSS Grid

So far, we've seen that we can lay individual elements out spatially using the box model.
But what when we want to co-ordinate groups of elements
- Well, we wrap them in divs, but then what?
In order to put them next to each other we have used:
- tables (but they tied rows and columns together
- floats (but they had issues)
- inline-block (eventually, but it has issues)
- flexbox: great, but only considers rows OR columns. You can't 'rowspan'
All of these are 'accidental tools'.
- We can use them but they weren't designed to deal with layout.
- They were all designed to work in 1 direction at a time.

12 is picked because it's easy to say what a full/half/third/quarter will be (12/6/4/3 columns)
That's useful because most people want groups of content to be those widths:
- header: full width (12 columns)
- sidebar: 1/3 width: (4 columns)
- main: 2/3 width (8 columns)
- footer: full width (12 columns)

All that positioning of elements individually is great
but how do we ensure that elements across the page stay in line with each other
- Is your header text going to line up with your footer text?
This is where grids come in. They ensure a consistency of content
They are for macro-alignment aka LAYOUT

A VERY POWERFUL 2-dimensional layout system
You specify the lines and areas of the grid in the CSS, then specify on the css for each element:
- what lines they cross or areas they cross, OR
- what area they belong in