¯\_(ツ)_/¯
Another F*cking Grid System
Flashback: The History of Web Layout…
Chapter 1: Tables
1994
“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
(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…
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
Limited Uses
containers?
Border-Box
box = width|height
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
See the Pen Flow! by Miriam Suzanne (@mirisuzanne) on CodePen.
Avoid Tightly Coupled Elements
components respond to unexpected changes
See the Pen !Flow by Miriam Suzanne (@mirisuzanne) on CodePen.
See the Pen To Flow or Not To Flow by Miriam Suzanne (@mirisuzanne) on CodePen.
Chapter 4: Positioning!?
Position: Relative
Similar to transform: translate()
(based on flow, but has no effect)
¯\_(ツ)_/¯
Only For Establishing Context
Position: Absolute/Fixed
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!
Kinda Flows…?
See the Pen Flow: Kinda by Miriam Suzanne (@mirisuzanne) on CodePen.
This Makes Sense For Text-Wrap
Add a ClearFix (Hack)!
// "Micro" Clearfix Class
.clearfix::after {
clear: both;
content: ' ';
display: table;
}
See the Pen Flow: Kinda (Clearfix) by Miriam Suzanne (@mirisuzanne) on CodePen.
display:
flow-root
the new clearfix alternative…
Overflow:
Hidden
(Hack) for fluid columns, and clearing containers…
(be careful)
See the Pen Overflow: Hidden (Hack) by Miriam Suzanne (@mirisuzanne) on CodePen.
¯\_(ツ)_/¯
not the worst hacks…
👍
Flexible Markup & Nesting!
<section>
<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>
<div>
<div class="next">Next! (overflow hack)</div>
<div> <!-- They all collapse! -->
<div>
<div>
<div>
<div>
<div>
<div>
<div class="last">Last! (floating)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
👎
Explicit Widths
floats aren’t very smart about context…
Sub-Pixel Rounding?
Don’t Worry
Modern Browsers
sub-pixel browser rendering vs. float isolation
See the Pen Don't bother with "isolation" in modern browsers by Miriam Suzanne (@mirisuzanne) on CodePen.
See Responsive Design’s Dirty Little Secret by John Albin Wilkins
Backgrounds Still Round Badly
(even if you try isolating them)
See the Pen SubPixel Rounding by Miriam Suzanne (@mirisuzanne) on CodePen.
Chapter 6: Inline Block!
👎
Don’t Bother
invasive and confusing!
Chapter 7: Display-Table?
One Row at a Time…
See the Pen Display Table by Miriam Suzanne (@mirisuzanne) on CodePen.
no margins, use border-padding
¯\_(ツ)_/¯
Kinda Nifty Hack?
Chapter 8: Grid Systems
a detour…
Columns & Gutters
Horizontal Spans
2007: Blueprint CSS
fixed width, margin gutters on the right…
.container {
width: 950px;
margin: 0 auto;
}
/* Sets up basic grid floating and margin. */
.column,
.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
(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_12,
.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;}
.unit{float:left;zoom:1;}
.size1on1{float:none;}
.size1on1{float:none;}
.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…
<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…
See the Pen It depends by Rachel Smith (@rachsmith) on CodePen.
by Rachel Smith
Are You MailForce or InstaFace?
OddBird
Small Team, Outside Consulting
Consistent Systems
Custom Grids
“Tiny Bootstraps For Every Client”
—Dave Rupert (not the spy)
(ClearLeft is an Agency)
Questions…
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%
}
Susy
just add meaning…
.grid-span {
width: span(3);
margin-right: gutter();
padding-left: span(1 wide);
}
👍
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
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
flex
: 2 1 20em
relative & ideal sizing
justify-content
: space-between
distributed white space
¯\_(ツ)_/¯
Single-Axis Layout
(with line wrapping)
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
Nothing like it, at all
The Spec is Complex…
Getting Started Is Not
Using CSS Grid in the Real World
5:00pm - Brenda Storer
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
Also: Negative 1-indexed
Column/Row Gaps
Placement of Grid-Items
.red {
grid-column: 1 / 4;
grid-row: 2 / span 2;
}
.green {
grid-column: 2 / -1;
grid-row: 1 / -2;
}
Named Grid Areas
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;">
See the Pen Bar chart in CSS grid + variables by Miriam Suzanne (@mirisuzanne) on CodePen.
https://css-tricks.com/css-charts-grid-custom-properties/
👍
Two Dimensions!
columns & rows
👍
Flexible Markup Order!
👎
Nesting Still Matters
We need subgrid
and display: contents
👍
All Kindsa’ Cool Shit
Autofill, Named Lines, Implicit Grids…


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
Susy CSS (for fun)
See the Pen SusyCSS by Miriam Suzanne (@mirisuzanne) on CodePen.
See the Pen SusyCSS Demo by Miriam Suzanne (@mirisuzanne) on CodePen.