slides.oddbird.net/rws/smashing/grids/

Defining Structure

@ Smashing Online

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…

12 equal columns, with gutters
an item that spans 6 columns
grid item with margin on the right side to form a gutter
far-right grid item has no space for a right gutter

2010… Responsive Web Design

.grid-span {
width: percentage( /* 23.7288136% */
((3 * 4em) + (2 * 1em)) / ((12 * 4em) + (11 * 1em))
);
margin-right: percentage( /* 01.6949153% */
1em / ((12 * 4em) + (11 * 1em))
);
padding-left: percentage( /* 08.4745763% */
((1 * 4em) + (1 * 1em)) / ((12 * 4em) + (11 * 1em))
);
}

(╯'□')╯︵ ┻━┻
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

12 equal columns, scribbled out
  1. Fluid & Fixed
  2. Stages of Squishiness
  3. Truly Two-Dimensional Layouts
  4. Nested Contexts
  5. Expand & Contract Content
  6. Media Queries, As Needed

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

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

  • % ➡ relative to parent width
  • vw ➡ relative to viewport width
  • fr ➡ relative to leftover space

25% of 1000px Always == 250px

1fr of 1000px Depends on Leftover Space

  • pxFixed
  • emRelative
  • vwRelative
  • %Fluid
  • frFlexible
  • px<length>
  • em<length>
  • vw<length>
  • %<length>
  • fr<flex>

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

grid page layout

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]

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 @mirisuzanne on CodePen.

miriamsuzanne.com

list view & contact form

Matches MultiColumn Math

Subgrid

as column or row template

See the Pen Subgrid Cards by @mirisuzanne on CodePen.

See the Pen Subgrid Forms by @mirisuzanne on CodePen.

Masonry ???

as column or row template

Headshot of Stacy Kvernmo

@stacykvernmo Stacy Kvernmo

Headshot of Rachel Andrew

@rachelandrew Rachel Andrew

Headshot of Jen Simmons

@jensimmons Jen Simmons