Defining Structure

90s… HTML <table>

(╯'□')╯︵ ┻━┻
TABLES ARE FOR DATA

┬──┬ ノ( ゜-゜ノ)

00s… Float: Everything

watch out for the double-margin bug!

2007-2010… Major Grid Frameworks

Blueprint, OOCSS, 960gs, Susy, etc…

2010… Responsive Web Design™

(╯'□')╯︵ ┻━┻
FLOATS ARE FOR —

2012… Flexible Boxes

Great for Auto-Distributing space

Not great for Explicit Layout

Avoid Explicit Widths

Flexbox is an implicit system

Designed to Pair With CSS Grid

oops, five years later…

2017… CSS Grid

March 6-9: Firefox 52 & Chrome 57

Modern Web Is Evergreen

new features over the weekend

Explicit (2D) Layouts! With Rows & Columns

Explicit Layouts! Defined by the Container

Explicit Layouts! With Intrinsic Options

display: grid

Implicit grids

generate auto-columns/rows as needed

Explicit grids

generate columns/rows from a template

grid-auto-flow: row

column | [+ dense]

Item Placement… grid-column-start: auto
grid-column-end: auto

Item Placement… grid-column: <start> / <end>
grid-row: <start> / <end>

Item Span… grid-column: span <count>

either start or end can be a span

Grid Terminology

lines, row & column tracks, cells, and areas

See the Pen Grid Terminology by @miriamsuzanne on CodePen.

Sizing Implicit Tracks grid-auto-columns
grid-auto-rows

Defining Templates grid-template-columns
grid-template-rows

Fluid & Fixed 20em 25% 200px

Fluid Until Fixed minmax(20em, 20%)

Fluid Until Fixed minmax(20%, 200px)

& Intrinsic min-content 20% max-content

& Fitted fit-content(<limit>)

clamp(auto, max-content, <limit>)

& Flexible 20ch 1fr 200px

Flexible > Fluid

25% of 1000px Always == 250px

1fr of 1000px Depends on Leftover Space

1fr ~= flex: 1

But fr… Use a basis of 0

So all 1fr tracks Will Be Equal

Except all fr tracks Have A Minimum As Well

Default 1fr is… minmax(auto, 1fr)

Flexible Until Fixed minmax(20em, 1fr)

(only use fr for max value)

For shrinking minmax(0, 1fr)

🤯 What is Leftover On an infinite Axis?

🤷‍♀️ Enough, And No More

Based on a “hypothetical 1fr size”

Stages of Squishiness Auto ➡ Minmax ➡ Flex

Defining Areas grid-template-areas

grid-template-areas

'header header header'
'nav    main   aside'
'nav    footer aside';

grid-template:

<areas-rows> / <columns>

grid-template

  'header          header         header' auto
  'nav             main           aside' 1fr
  'nav             footer         aside' auto
/ fit-content(20%) minmax(0, 1fr) 20em

Area Placement… grid-column: header

Area Start & End… grid-row: header / footer

<area> header

<rows> / <columns> header / main

<r-start> / <c-start> /
<r-end> / <c-end> header / main /
main / aside

Generated Line Names header-start / main-end

Named Grid Lines

[before] 1fr [center] 1fr [after]

Align to Names

grid-column: before / after ;

Names ➡ Areas

with matching *-start & *-end names

[nav-start] 15em [nav-end] grid-area: nav

Overlapping Areas

[full-start nav-start] 20em [nav-end] 1fr [full-end]

grid-template

               'header          header         header' auto
               'nav             main           aside' 1fr
               'nav             footer         aside' auto
/ [full-start] fit-content(20%) minmax(0, 1fr) 20em [full-end]

See the Pen Overlapping Named Lines by @miriamsuzanne on CodePen.

Media Queries, As Needed

Repeating Grids

repeat( <count>, <tracks> )

repeat( 12, 1fr )

repeat( 6, 1fr [name] 2fr )

grid-column: name 3

Fit Available Items

repeat( auto-fit , minmax( 15em, 1fr ));

Fill Available Space

repeat( auto-fill , 200px);

See the Pen Auto-Fit Grid by @miriamsuzanne on CodePen.

miriamsuzanne.com

list view & contact form

Matches MultiColumn Math

See the Pen grid and multicol alignment by @miriamsuzanne on CodePen.

Subgrid

as column or row template

See the Pen Subgrid Cards by @miriamsuzanne on CodePen.

See the Pen Subgrid Forms by @miriamsuzanne on CodePen.

More Demos by Rachel Andrew

Masonry ???

as column or row template

See the Pen Masonry Layout Compare by @miriamsuzanne on CodePen.

See the Pen Masonry Layout Options by @miriamsuzanne on CodePen.