Get On the Grid!

Tracy Rotton, Taupecat Studios

These slides available at https://taupe.cat/2ljjVOw

#WCRoc #CSSGrid

What does this joke really mean?

Demo Time!

A Brief History of Web Layout

Tables

  • 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
    • clearings
  • Became popular anyway.

Demo Time!

At Last! Flexbox!

  • Equal heights, by default!
  • No clearing problems!
  • Define widths, or allow auto widths!
  • Wrapping!

Demo Time!

So Flexbox Is Enough, Right?

Enter: CSS Grids

CSS Grid Layout Module Level 1

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…

http://lists.w3.org/Archives/Public/www-style/2013May/0114.html

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.

Demo Time!

What Is This “fr” Unit of Which You Speak?

Demo Time!

Subgrids

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

Demo Time!

Support and Fallbacks

or

OMGIEandEdge

October 17, 2017:
CSS Grid Layout Module Level 1 comes to Microsoft Edge

Resources

Thank You!

https://taupecat.com

@taupecat