original photo by Bianca Kastl @bkastl
stolen slide

The importance of imitation


Don't use Susy

Trust me


Another F*cking Grid System


Chapters 1 & 2:

The History of Web Layout

It's only a flashback

1994: Tables

Young OddBirds



“Tables Are For Data


Strict (non-linear) Markup


Limited Styling


Accessibility Nightmare

(when used for layout)


(Also An SEO/Legal Problem)

do it for the robot lawyers!

Code is Communication

—Sarah Drasner

Web is about connections

Meaningful to Humans & Machines

Robot & human

!= 👨






All the devices

that’s, like, a small fraction of your audience?

Client Control Over Final Results

you’re not in a print shop any more…

How Will This Adapt…?

…when the content changes?

(auto height & width)

…when the viewport changes?

(fluid layouts & media-queries)

…when the context changes?

(modular systems)

Design for Dynamic Relationships

1996 / 2000: CSS (Is Awesome)

The End

CSS is Awesome

(this is a feature)

don’t be fooled…

Declarative Syntax != Static Results

Chapter 3: Layout Concepts

» The Box Model (is broken)

Default: Content-Box

box = width|height + borders + padding

content-box sizing

Limited Uses



box = width|height

border-box sizing

Fix It Everywhere

*, ::before, ::after {
  box-sizing: border-box;


html {
  box-sizing: border-box;

* {
  box-sizing: inherit;

Would you inherit margins?

» Go With The Flow

Avoid Tightly Coupled Elements

components respond to unexpected changes

Chapter 4: Positioning!?

Position: Relative

Position Relative

Similar to transform: translate()

(based on flow, but has no effect)


Only For Establishing Context

Position: Absolute/Fixed

Position Absolute

Removed From The Flow Entirely…

relative to positioned ancestor (absolute) or viewport (fixed)…


Only For Overlays

off-canvas, modals, menus, tooltips, etc…

Chapter 5: Floats!

Floated images in text

Kinda Flows…?

This Makes Sense For Text-Wrap

Floated images in text

Add a ClearFix (Hack)!

// "Micro" Clearfix Class
.clearfix::after {
    clear: both;
    content: ' ';
    display: table;

Overflow: Hidden

(Hack) for fluid columns, and clearing containers

(be careful)


not the worst hacks


Flexible Markup & Nesting!

  <div class="float">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis laudantium ea tenetur quas incidunt. Voluptatibus veritatis, rerum vitae illum, recusandae quis. Recusandae quisquam sunt id, eius debitis quos animi hic.
    <div class="next">Next! (overflow hack)</div>
    <div> <!-- They all collapse! -->
                  <div class="last">Last! (floating)</div>


Explicit Widths

floats aren’t very smart about context…

Sub-Pixel Rounding?

Don’t Worry

What is 25% of 50px… in 2008?

Old subpixel rounding diagram

demo by John Resig

Chapter 6: Inline Block!


Don’t Bother

invasive and confusing!

Chapter 7: Display-Table?

no margins, use border-padding


Kinda Nifty Hack?

Shortcut: use grids

Chapter 8: Grid Systems

a detour…

Columns & Gutters

grid demo

Horizontal Spans

span demo

2007: Blueprint CSS

fixed width, margin gutters on the right…

.container {
  width: 950px;
  margin: 0 auto;

/* Sets up basic grid floating and margin. */
.span-1, .span-2, .span-3, 
.span-4, .span-5, .span-6 {
  float: left;
  margin-right: 10px;
/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1 {width: 30px;}
.span-2 {width: 70px;}
.span-3 {width: 110px;}
.span-4 {width: 150px;}
.span-5 {width: 190px;}
.span-6 {width: 230px;}

(Olav Bjorkoy)

Remove The Last Gutter

grid demo

(or left-margins, removed on the first column)

Classes Are The API

<article class="column col6of12 last">Article</article>

2010: 960 Grids

gutters split left and right

.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
.grid_1, .grid_2, .grid_3,
.grid_4, .grid_5, .grid_6 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;

.container_12 .grid_1 {
  width: 60px;

.container_12 .grid_2 {
  width: 140px;

(Nathan Smith)

Split [Margin] Gutters


No Edge Cases


<article class="grid_6">Article</article>

2009: Object Oriented CSS

simple fractions, no gutters

/* CSS Grids */
/* **************** GRIDS ***************** */
.line, .lastunit {overflow: hidden; _overflow: visible; zoom:1;width:auto !important;}
.size1on2{width:50%;_width:49.9% !important;}
.size1on3{width:33.33333%;_width:33.25% !important;}
.size2on3{width:66.66666%;_width:66.65% !important;}
.size1on4{width:25%;_width:24.95% !important;}
.size3on4{width:75%;_width:74.95% !important;}
.size1on5{width:20%;_width:19.95% !important;}
.size2on5{width:40%;_width:39.95% !important;}
.size3on5{width:60%;_width:59.95% !important;}
.size4on5{width:80%;_width:79.95% !important;}
.lastunit {float:none;_float:right;}

(Nicole Sullivan)

No Margin Gutters

technically, no grid

inside demo

<article class="unit size3on4 lastunit">Article</article>


Shared Browser Hacks

(maybe the driving force)


Consistent Patterns


Developers Can Ignore CSS


Developers Ignore CSS


Frameworks Lock You In

fine until you try something new…

Are You MailForce or InstaFace?

OddBird now


Small Team, Outside Consulting

CSS Systems by Natalie Downe

(ClearLeft is an Agency)

Consistent Systems

Custom Grids

“Tiny Bootstraps For Every Client

—Dave Rupert (not the spy)


Static, fluid, elastic, or a combo?

equal columns, or asymmetrical? how many?

gutters in padding, left, right, or split-margins?

responsive in what ways?


Adaptive Before Media-Queries

fluid (%) grids, with elastic (em) containers


Project-Defined Restrictions


Project-Defined API


Can Be Ugly Math

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


just add meaning

.grid-span {
  width: span(3);
  margin-right: gutter();
  padding-left: span(1 wide);

Susy first commit


Any Grid System, On Demand

$blueprint: (
  'columns': susy-repeat(12, 30px),
  'gutters': 10px,
  'spread': 'narrow',
  'container-spread': 'narrow',
$960: (
  'columns': susy-repeat(12, 60px),
  'gutters': 20px,
  'spread': 'narrow',
  'container-spread': 'wide',


Grid Systems Are Still Overkill

Chapter 9: DIY Grids

with any technique…

Fluid Math

target / context == multiplier

Span 6 of 12

Grid Math

Sass Math

width: percentage(target / context)

CSS Math

width: calc(target / context)

Gutters Ruin The Math

.grid-span {
  width: percentage(((3*4em) + (2*1em)) / ((12*4em) + (11*1em))); // 23.7288136%

No More Gutters

.element {
  width: percentage(3/12);
.element {
  width: calc(3 / 12 * 100%);


CSS Systems + OOCSS + Susy

simple math, open system, no framework


Works With Any Technique

float, flexbox, display-table, etc…


Padding Gutters As Needed

Chapter 10: Custom Properties

(aka CSS Variables)

--property-name: any value;

var( --property-name , fallback)

calc( var( --span ) / var( --columns ) * 100% )

Inheritance & Media Queries

/* define the grid in one place */
:root {
  --columns: 3;
  --gutters: 0.5em;

  @media (min-width: 50em) {
    --columns: 6;
    --gutters: 1em;

Basic Span Mixin

/* these properties don't inherit */
* {
  --width: calc(var(--span) / var(--columns) * 100%);
  width: var(--width, initial);

Complete Grid System

.item {
  --span: 1;
  float: left;
  padding: var(--gutters);


Plain Old CSS


Very Little Code


Understands The DOM


Implicit Relationships > Explicit Grids

let the browser figure it out…

Chapter 11: Flexbox!


Finally Not a Hack!!

kinda like floats+display-table…

All About Relationships

how to use leftover space

Element Driven

flex: 2 1 20em

relative & ideal sizing

justify-content: space-between

distributed white space


Single-Axis Layout

(with line wrapping)

Flexbox Axis

flex-direction: row-reverse

control the axis

align-items: stretch

cross-axis alignment

Equal-Height Columns, Vertical-Centering, etc!

order: 2

flexible source-order


Nesting Matters Too Much

We need display: contents


Relationships & Control!


Poor Performance on Full Pages

Chapter 12: OMG OMG, CSS Grid

why did we even talk about anything else?

Actual, Real, Layout In The Browser

this is not a drill

Nothing like it, at all

The Spec is Complex

Getting Started Is Not

Grids Defined On Containers

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 10px;

Container or Element Driven

auto returns to the flow…

% defines a fraction of total space

vw defines a fraction of the viewport

fr defines a fraction of remaining space

1fr == minmax(auto, 1fr)

use minmax(0, 1fr) to allow shrinking

Lines 1-indexed

Grid Lines

Also: Negative 1-indexed

Grid Lines (negative)

Column/Row Gaps

Grid gap

Placement of Grid-Items

.red {
  grid-column: 1 / 4;
  grid-row: 2 / span 2;
.green {
  grid-column: 2 / -1;
  grid-row: 1 / -2;

Placing grid items

Named Grid Areas

Grid area desire

body {
  grid-template-areas: 'header header'
                       'nav    main'
                       'footer footer';

h1 { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }

Jen Simmons

Intrinsic Web Design:

  • Fluid and fixed
  • Stages of squishiness (fixed, fr, minmax(), auto)
  • Truly two-dimensional layouts
  • Nested contexts (Flow, Flexbox, Grid, Multicolumn)
  • Expand and contract content
  • Media queries, as needed


Data-Driven Layouts

<div style=" --start: 30; --duration: 60;">

Schedule grid


Two Dimensions!

columns & rows

Grid Axis


Flexible Markup Order!


Nesting Still Matters

We need subgrid and display: contents


All Kindsa’ Cool Shit

Autofill, Named Lines, Implicit Grids…

Click it all together
Put your helmet on



usable templates, with fallbacks already written…

Rachel Andrew and Jen Simmons

Use @supports For Fallbacks

/* fallback layout… */ 

@supports (display: grid) { 
  /* grid layout… */ 

Epilogue: Avoiding Grid Systems

Start With CSS Grid

it’s the only real layout option…

Layouts So Easy

…You Have Time For The Fallback!

Fix the Box Model

Stay In The Flow

Think Dynamically

how do objects relate and change?

Remove Gutter Math

great power to do anything

The world is ready for more than 12-columns

Epi-Epilogue: Going Too Far


The internet is awesome