Grids everywhere

1996

Evolution

<table>

float

display: inline-block;

display: table;

CSS Frameworks

display: flex;

display: grid;

Grid Concepts

Grid Lines

Grid Tracks

Grid Tracks

Rows

Grid Tracks

Columns

Grid Cells

Grid Areas

display: grid;

New formatting context

Track sizing

grid-template-columns & grid-template-rows

Create boxes from CSS!

Track sizing example

<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
</div>
                            

Placement properties

grid-column & grid-row

DOM order ≠ Visual order

Placement example

<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
                            

Named grid lines

Use custom identifiers to reference lines

A line can have several names

Named lines example

<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
                            

Grid areas

grid-template-areas

   ###     ######   ######  #### ####       ###    ########  ########
  ## ##   ##    ## ##    ##  ##   ##       ## ##   ##     ##    ##
 ##   ##  ##       ##        ##   ##      ##   ##  ##     ##    ##
##     ##  ######  ##        ##   ##     ##     ## ########     ##
#########       ## ##        ##   ##     ######### ##   ##      ##
##     ## ##    ## ##    ##  ##   ##     ##     ## ##    ##     ##
##     ##  ######   ######  #### ####    ##     ## ##     ##    ##

Grid areas example

<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
</div>
                            

Alignment

CSS Box Alignment spec

Horizontal & vertical centering!

Items alignment example

<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
                            

Tracks alignment example

<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
                            

Grid gutters

grid-row-gap & grid-column-gap

Grid gutters example

<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
    <div class="e">E</div>
</div>
                            

Auto-placement

grid-auto-flow

Auto-placement example

<form>
    <label>Input</label>
    <input>
    <label>Checkbox</label>
    <input type="checkbox">
    <button>Submit form</button>
</form>
                            

Responsive grids

Flexible track sizing

Media Queries

Responsive grid example

.grid {
    display: grid;
    grid: 200px 1fr / 100px 1fr auto;
    grid-template-areas: "header header"
                         "aside  main  "
                         "aside  footer";
}

@media (max-width: 400px) {
    .grid {
        grid: 1fr / 100px 1fr 100px auto;
        grid-template-areas: "header"
                             "main  "
                             "aside "
                             "footer"; }
}
                        

Responsive grid example

Auto repeat

Auto repeat example

<div class="grid">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</div>
                            

Subgrids

Subgrids example

<form><ul>
    <li><label>Input</label><input></li>
    <li><label>Checkbox</label><input type="checkbox"></li>
    <li><button>Submit form</button></li>
</ul></form>
                            

How does it work?

Example

<div class="grid">
    <div class="title">Title</div>
    <div class="nav">Nav</div>
    <div class="main">Lorem ipsum...</div>
    <div class="aside">Ad</div>
    <div class="aside">Adword</div>
</div>
                        

.grid  { display: grid;
         width: 800px;
         grid-template-columns: 200px 1fr auto;
         grid-template-rows: 100px auto; }
.title { grid-row: 1; grid-column: 2; }
.nav   { grid-row: 2; grid-column: 1; }
.main  { grid-row: 2; grid-column: 2; }
.aside {              grid-column: 3; }
                        

Empty grid

Place items

Place items

Place items

Place items

Place items

Place items

Fixed column

Intrinsic column

Intrinsic column

Flexible column

Flexible column

Layout items

Fixed row

Intrinsic row

Intrinsic row

Stretch items

Faster grids

Fixed vs intrinsic sizing

200px is faster than auto

60% faster (20x10 grid)

100% faster (100x20 grid)

140% faster (100x100 grid)

Intrinsic vs flexible sizing

auto is faster than 1fr

40% faster

Vertical stretch

Vertical stretch in auto-sized items is slower than other (e.g. start)

Horizontal non-stretch

Avoid horizontal stretch (e.g. start) in auto-sized items is slower

Status

W3C Specification

CSS Grid Layout - https://drafts.csswg.org/css-grid/

Started by Microsoft in 2010

Last Working Draft 17 September 2015

W3C Test Suite

Can I use grid? 😭

Browsers adoption 😃

	Old implementation since IE 10	Prefixed: -ms
	More complete implementation	⚐Experimental Web Platform Features
	Enabled by default on WebKit Nightlies	Prefixed: -webkit
	Implementation started early this year	⚐layout.css.grid.enabled

Polyfill: https://github.com/FremyCompany/css-grid-polyfill

Examples

• http://igalia.github.io/css-grid-layout/ by Igalia
• http://gridbyexample.com/ by Rachel Andrew

Acknowledgements

Igalia and Bloomberg working together to build a better web