What is CSS grid?
- Not another layout hack
<table>/float: left;/display: inline-block; - Not a grid system
- Has nothing to do with Bootstrap
- Unlike HTML
col-xs-6 col-sm-8 col-md-12 - Method of describing layouts with grid structures in CSS
What about flexbox?
Flexbox only got us so far
- Flexbox is column or row
- CSS grid is a 2D layout
- Items can be placed in rows and columns at the same time
- Flexbox 💗 Grid
Demo time ⌚
Basic grid
- Define the grid container
display: grid; - Create columns
grid-template-columns - Shiny new
frunit - Create rows
grid-template-rows - Add spacing between items
gap–grid-gap
Smarter grid
- Repeat columns or rows with
repeat()function - Scaleable items with
minmax()function
Spanning columns
- Grid lines are numbered and reverse numbered
grid-column: 1 / -1; - Negate need for
col-xs-6 col-sm-8 col-md-12 - Grid lines can also be named
Spanning columns and rows
- Grid lines are numbered the same way on the Y axis,
grid-row - Items without defined placement get auto placed by the browser
Now we're cooking 🍳
Using grid-template-areas
- Draw a map of your layout
- Use semantic names
- Redefine grid at different screen sizes
- Mapping items is already done
Using @media
- Grid coupled with
@mediais powerful - Design mobile first, you may not need a grid
Implicit grid
- When you have more items than what is explicitly defined
- Can be controlled with auto placement
grid-auto-rows/grid-auto-flow
Fit as many items as possible
- No media queries!
- Use
auto-fill/auto-fitwithrepeat
Consider accessibility 🗣️
Reordering items
- The
orderproperty lets us reorder items - Be careful using it, think about screen readers
- Use an
aria-labelas a minimum to convey meaning - Ideally reorder in the source code
What about browser support? 🌈
Using @supports
- Always check your analytics for browser usage
- Feature query, like Modernizr.js for CSS
- No polyfill for grid
- Use progressive enhancement
- Can use grid without feature queries, beauty of CSS
Always remember ⚠️
Websites do not need to look the same on every browser!
– Some smart human
Further reading