Another F*cking Grid System

It's only a flashback

Flashback: The History of Web Layout

Chapter 1: 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

Meaningful to Humans & Machines

Table Layouts Destroy Meaning

for everyone involved


Chapter 2: CSS Is Awesome

1996 / 2000

The End

CSS is Awesome

(this is a feature)

don’t be fooled…

Declarative Syntax != Static Results

Dynamic Relationships

How Will This Change…?

…when the content changes?

(auto height & width)

…when the viewport changes?

(fluid layouts & media-queries)

…when the context changes?

(the cascade)

Design Implicit Relationships

Client Control Over Final Results

you’re not in a print shop any more…

All the devices

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

!= 👨

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;

display: flow-root

the new clearfix alternative

Poor browser support

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?

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

Consistent Systems

Custom Grids

“Tiny Bootstraps For Every Client

—Dave Rupert (not the spy)

(ClearLeft is an Agency)


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)

custom property support

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

calc support

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

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 CSS Grid

why did we even talk about anything else?

Actual, Real, Layout In The Browser

this is not a drill

Caniuse Grids

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;

% 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; }


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…

usable templates, with fallbacks already written…

Rachel Andrew and Jen Simmons

Click it all together
Put your helmet on


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

The world is ready for more than 12-columns

Epi-Epilogue: Going Too Far