{the jump}
Intro to CSS Grid
Layout this far...
- 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.
Removing Confusion
- BTW, CSS Grid is different from 'grid systems'
- Grid systems are made with the technologies listed on the last slide and are either made by:
- You: doing things like: .half { float: left; width: 50% }
- 3rd party (like twitter bootstrap), who have made a more complex one which you use by:
- including their stylesheets
- which gives you access to classes
- which you put on elements to apply styles like the orange one above
- Theirs is more complex and works at different breakpoints
Traditional 12 column grid
- 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)
Why do we need layout/grids at all?
- 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
Let's make one!!
CSS Grid
What is it?
- 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
Created By: Rachael Andrew (Editor of Smashing Magazine) and Jen Simmons (Handy YouTube series) and the rest of the CSS Working Group (blog)
Can I use it in production yet?
- YES
- Cross-browser support: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement
- Is IE a ringpiece? Yes, but not so badly: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/
- Strategies for supporting older browsers: https://www.webstoemp.com/blog/notes-on-using-css-grid-in-production/
What are the benefits
- Your HTML stays clean
- No 'cruft' markup. (no div.row, div.col-md-6, etc.)
- Control exists in the CSS layer
- Easy to change layout at the drop of a hat!