Get On the Grid!
Tracy Rotton, Taupecat Studios
These slides available at https://taupe.cat/2ljjVOw
What does this joke really mean?
A Brief History of Web Layout
- Earliest attempt of layouts on the web.
- Not semantic.
- Not accessible.
- But we didn’t HAVE CSS!
Next Attempt: Floats
- Never intended to be a solution for layout.
- Fraught with problems.
- equal heights
- Became popular anyway.
At Last! Flexbox!
- Equal heights, by default!
- No clearing problems!
- Define widths, or allow auto widths!
So Flexbox Is Enough, Right?
Enter: CSS Grids
This. Changes. Everything.
How They Are Similar
- Container element and child elements
- Define the container element as “grid” (“inline-grid”)
- Can justify/align all the children of the container element
- Can justify/align individual child elements within the container
How They Are Different
- Flexbox is one dimensional. Grid is two dimensional.
- You don’t define a “direction” in grid.
- You reference lines and areas in grid.
- You can give names to lines and grid areas.
Tab Atkins on When to Use Which
Flexbox is for one-dimensional layouts…
Grid is for two-dimensional layouts…
Flexbox is appropriate for many layouts, and a lot of “page component” elements… Grid is appropriate for overall page layout, and for complicated page components which aren’t linear…
…I believe most pages will be composed of an outer grid for the overall layout, a mix of nested flexboxes and grid for the components of the page…
The Many Faces of CSS Grid
- Specify the sizes of columns, rows, and gaps.
- Naming the “lines” between the columns and rows.
- Naming the “areas” of the grids.
What Is This “fr” Unit of Which You Speak?
It’s grids all the way down.
- Nested Grid: If a grid item has
display: grid, then the nested grid would be independent of the parent grid.
- Subgrid: If a grid item has
display: subgrid, its grid matches the columns and rows of the parent grid.
- Subgrid has no active browser support as yet.
Responsive Layout Without the Media Queries
Support and Fallbacks
October 17, 2017:
CSS Grid Layout Module Level 1 comes to Microsoft Edge
- Rachel Andrew: Grid by Example: https://gridbyexample.com/
- MDN CSS Grid Layout:
- CSS Tricks Complete Guide to Grid: