Slide 1
Slide 1 text
CSS Grid Layout
Rachel Andrew
An Event Apart Boston, May 2015
Slide 2
Slide 2 text
Rachel Andrew
http://rachelandrew.co.uk
@rachelandrew
http://grabaperch.com
Slide 3
Slide 3 text
CSS in 2015 is amazing.
Slide 4
Slide 4 text
The trouble with CSS layout
• Floats and clearfix hacks
• Absolute positioning means elements are taken
out of document flow and risk overlaps
• Redundant markup and positioning oddities with
display: table
• White space issues with inline-block
Slide 5
Slide 5 text
https://www.flickr.com/photos/zervas/2810241612
Flexbox?
Slide 6
Slide 6 text
Seeing Flexbox as the silver bullet for
layout issues is likely to lead us down
another path of layout hacks.
Slide 7
Slide 7 text
The cost of taming layout methods
• Developer hours spent learning non-obvious
concepts.
• Compromises in terms of document semantics in
order to achieve responsive layouts.
• Needing to lean on frameworks to help with
complex math.
• Adding markup to create grids
• Using preprocessors to abstract layout hacks
Slide 8
Slide 8 text
We need a designed for purpose
layout system for the sites and
applications we develop today.
Slide 9
Slide 9 text
CSS Grid Layout
Slide 10
Slide 10 text
Our HTML consists of a
div with a class of
wrapper and six child
elements.
A
B
C
D
E
F
Slide 11
Slide 11 text
To create a grid we use a
new value of the display
property.
display: grid
.wrapper {
display: grid;
}
Slide 12
Slide 12 text
We describe the grid using
the new properties:
grid-template-columns
grid-template-rows
.wrapper {
display: grid;
grid-template-columns:
100px 10px 100px 10px 100px;
grid-template-rows:
auto 10px auto;
}
Slide 13
Slide 13 text
We position items using the
new properties:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
.a {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
Slide 14
Slide 14 text
To position an item bottom
centre, I start at column
line 3, this is the line after
the gutter track.
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
Slide 15
Slide 15 text
To span more tracks we
just change the end row or
column line.
.b {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
}
Slide 16
Slide 16 text
The longhand for line-
based placement means
up to 4 properties to
position each element. .a {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
Slide 17
Slide 17 text
Declare start and end
values with grid-column
and grid-row.
Values are separated by a
/ symbol.
.a {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 6;
grid-row: 3 / 4;
}
Slide 18
Slide 18 text
Declare all 4 values using
the grid-area property.
.a {
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 3 / 3 / 4 / 6;
}
Slide 19
Slide 19 text
Grid lines relate to writing mode. In
a right to left language such as
Arabic the first column line is the
right-hand line.
Slide 20
Slide 20 text
Grid Terminology
Slide 21
Slide 21 text
Grid Lines
Lines can be horizontal or vertical. They
are referred to by number and can be
named.
Highlighted is Column Line 2.
Slide 22
Slide 22 text
Grid Track
A Grid Track is the space between two
Grid Lines. Tracks can be horizontal or
vertical (rows or columns).
The highlighted Grid Track is between
Row Lines 2 and 3.
Slide 23
Slide 23 text
Grid Cell
The smallest unit on our grid, a Grid Cell
is the space between four Grid Lines. It’s
just like a table cell.
The highlighted Grid Cell is between row
lines 2 and 3 and column lines 2 and 3.
Slide 24
Slide 24 text
Grid Area
Any area of the Grid bound by 4 Grid
Lines. It can contain many Grid Cells.
The highlighted Grid Area is between
row lines 1 and 3, column lines 2 and 4.
Slide 25
Slide 25 text
All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
Slide 26
Slide 26 text
Line-based placement
Slide 27
Slide 27 text
http://gridbyexample.com/examples/code/layout9.html
Slide 28
Slide 28 text
The HTML around my
page content.
The various areas of my
page are child elements
of a div with a class of
wrapper.
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Declaring a grid on
wrapper.
The grid has three
columns, and four rows.
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 30% 5% 65%;
grid-template-rows: 40px auto 20px auto;
}
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Positioning our elements
using the grid-column and
grid-row shorthand.
This is all we need to do
to create our layout.
.mainheader {
grid-column: 1 / 4;
grid-row: 2 / 3;
}
.panel {
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.content {
grid-column: 3 / 4;
grid-row: 4 / 5;
}
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
I can add a footer to this
layout - and it doesn’t
matter in which unusual
place I want to add the
markup.
Slide 36
Slide 36 text
Positioning the footer
between row lines five
and six.
.mainfooter {
grid-column: 1 / 4;
grid-row: 5 / 6;
}
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Our grid only has 5 row
lines specified - yet we
placed an item between
row lines 5 and 6.
Grid creates an implicit
grid line for us.
.wrapper {
display: grid;
grid-template-columns: 30% 5% 65%;
grid-template-rows: 40px auto 20px auto;
}
.mainfooter {
grid-column: 1 / 4;
grid-row: 5 / 6;
}
Slide 39
Slide 39 text
Grid lines can be explicit or implicit
• Explicit grid lines are those specified using grid-
template-rows or grid-template-columns.
• Implicit lines are created when you place
something into a row or column track outside of
the explicit grid.
• Default behaviour is those tracks are auto sized.
You can specify a size with the grid-auto-
columns and grid-auto-rows properties.
Slide 40
Slide 40 text
Grid is “table like” however …
• Unlike a table for layout Grid does not rely on
your content being a particular order in the
source.
• Being entirely described in CSS we can move
things around the Grid at different breakpoints,
introduce or redefine a Grid for any breakpoint.
Slide 41
Slide 41 text
Using Grid to order the
page elements in a single
column for narrow screen
widths.
.wrapper {
display: grid;
grid-template-rows:
10px auto 10px auto 10px auto 10px auto;
}
.mainheader {
grid-row: 2 / 3;
}
.content {
grid-row: 4 / 5;
}
.panel {
grid-row: 6 / 7;
}
.mainfooter {
grid-row: 8 / 9;
}
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Redefine the Grid at min-
width 550 pixels.
Position items as in the
earlier example.
@media (min-width: 550px) {
.wrapper {
grid-template-columns: 30% 5% 65%;
grid-template-rows: 40px auto 20px auto 20px auto;
}
.mainheader {
grid-column: 1 / 4;
grid-row: 2 / 3;
}
.panel {
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.content {
grid-column: 3 / 4;
grid-row: 4 / 5;
}
.mainfooter {
grid-column: 1 / 4;
grid-row: 6 / 7;
}
}
Slide 44
Slide 44 text
Named Grid Lines
Slide 45
Slide 45 text
http://gridbyexample.com/examples/code/layout10.html
Slide 46
Slide 46 text
Name lines with the name
in parenthesis.
Remember we name grid
lines and not grid tracks.
.wrapper {
display: grid;
grid-template-rows:
10px (row-header-start) auto (row-header-end)
10px (row-content-start) auto (row-content-end)
10px (row-panel-start) auto (row-panel-end)
10px (row-footer-start) auto (row-footer-end);
}
Slide 47
Slide 47 text
Here we are positioning
based on line numbers.
.mainheader {
grid-row: 2 / 3;
}
.content {
grid-row: 4 / 5;
}
.panel {
grid-row: 6 / 7;
}
.mainfooter {
grid-row: 8 / 9;
}
Slide 48
Slide 48 text
Here we are positioning
by named lines.
.mainheader {
grid-row: row-header-start / row-header-end ;
}
.content {
grid-row: row-content-start / row-content-end;
}
.panel {
grid-row: row-panel-start / row-panel-end ;
}
.mainfooter {
grid-row: row-footer-start / row-footer-end;
}
Slide 49
Slide 49 text
Named Areas
Slide 50
Slide 50 text
http://gridbyexample.com/examples/code/layout11.html
Slide 51
Slide 51 text
We assign a name to the
elements on our page.
I am doing this outside of
any Media Queries.
.mainheader {
grid-area: header;
}
.content {
grid-area: content;
}
.panel {
grid-area: sidebar;
}
.mainfooter {
grid-area: footer;
}
Slide 52
Slide 52 text
Describe the layout on
the parent element using
the grid-template-areas
property.
A period “.” indicates that
this grid cell is empty.
.wrapper {
display: grid;
grid-template-rows:
10px auto 10px auto 10px auto 10px auto;
grid-template-areas:
"."
"header"
"."
"content"
"."
"sidebar"
"."
"footer";
}
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Redefining the template
areas for the wider
layout. @media (min-width: 550px) {
.wrapper {
grid-template-columns: 30% 5% 65%;
grid-template-rows:
2em auto 1em auto 1em auto;
grid-template-areas:
". . ."
"header header header"
". . ."
"sidebar . content"
". . ."
"footer footer footer"
}
}
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
Implicit Named Grid Lines
Slide 59
Slide 59 text
Named grid areas create
four implicit named lines.
You can use these in the
same way as lines you
have explicitly named.
.wrapper {
grid-template-columns: 30% 5% 65%;
grid-template-rows: 2em auto 1em auto 1em
auto;
grid-template-areas: ". . ."
"header header header"
". . ."
"sidebar . content"
". . ."
"footer footer footer"
}
.test {
z-index: 100;
background-color: red;
grid-column: content-start / content-end;
grid-row: content-start / footer-end;
}
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Items on the Grid can be layered
using the z-index property.
Slide 62
Slide 62 text
A 12 column, flexible grid
Slide 63
Slide 63 text
The Bootstrap grid, and
those in other
frameworks relies on our
describing the layout in
the markup.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Slide 64
Slide 64 text
With CSS Grid Layout we describe the
layout in the CSS and can redefine
that description at any breakpoint.
Slide 65
Slide 65 text
getskeleton.com
Slide 66
Slide 66 text
You can use the repeat
keyword to repeat all or
part of the grid definition.
This would create 4 200
pixel wide tracks,
separated by a 20 pixel
wide gutter track.
grid-template-columns: repeat(4, 200px 20px);
Slide 67
Slide 67 text
The fr unit is a flexible
length that represents a
fraction of the available
space in the grid
container.
grid-template-columns: 5fr 1fr 10fr 1fr 5fr;
Slide 68
Slide 68 text
We can give multiple grid
lines the same name.
This means we can use
the span keyword to span
n number of lines, rather
than specifying a specific
grid line.
.wrapper {
grid-template-columns:
repeat(4, (col) 200px (gutter) 20px);
}
.content {
grid-column: col 2 / span gutter 2;
}
Slide 69
Slide 69 text
The markup used to
create the Grid using the
Skeleton framework.
Like the Bootstrap Grid
and other similar
frameworks it requires
classes that describe the
grid to be added to the
markup.
Skeleton Grid
Four columns
Four columns
Four columns
Eight columns
Four columns
Three columns
Three columns
Three columns
Three columns
Six columns
Six columns
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
When using CSS Grid
Layout we have no need
to describe our grid in
markup.
CSS Grid Layout Version
Four columns
Four columns
Four columns
Eight columns
Four columns
Three columns
Three columns
Three columns
Three columns
Six columns
Six columns
Slide 72
Slide 72 text
Defining the 12 column
grid.
The repeat keyword
repeats the pattern of
columns or rows the
number of times specified
before the comma.
.wrapper {
display: grid;
grid-template-columns:
repeat(11, (col) 4fr (gutter) 3.5fr ) (col) 4fr (gutter);
grid-template-rows:
auto repeat(4, (row) auto (gutter) 15px);
}
Slide 73
Slide 73 text
Placing box1 on the grid.
Multiple lines have the
same name. This means we
can use the span keyword.
Here I place box1 starting
at the first line named col,
spanning to the 4th line
named gutter.
In the first row named row,
spanning to the first line
named gutter.
.box1 {
grid-column: col / span gutter 4;
grid-row: row / span gutter;
}
Slide 74
Slide 74 text
Placing box8 on the grid.
Starting on column line 7,
spanning 3 gutter lines.
In the 3rd row named row,
spanning 1 gutter line.
.box8 {
grid-column: col 7 / span gutter 3;
grid-row: row 3 / span gutter;
}
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
With Grid Layout we can
easily span rows just like
columns.
.box1b {
grid-column: col / span gutter 4;
grid-row: row / span gutter 2;
}
.box2b {
grid-column: col 5 / span gutter 4;
grid-row: row / span gutter 3;
}
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
The header and footer
span the full grid.
The content and panel
display side by side.
.mainheader {
grid-column: col / span gutter 12;
grid-row: row /span gutter;
}
.mainfooter {
grid-column: col / span gutter 12;
grid-row: row 3 /span gutter;
}
.content {
grid-column: col 5 / span gutter 8;
grid-row: row 2 / span gutter;
}
.panel {
grid-column: col / span gutter 4;
grid-row: row 2 / span gutter;
Slide 79
Slide 79 text
http://gridbyexample.com/examples/code/layout13.html
Slide 80
Slide 80 text
The header and footer
span the full grid.
The content and panel
display side by side.
.mainheader {
grid-column: col / span gutter 12;
grid-row: row /span gutter;
}
.mainfooter {
grid-column: col / span gutter 12;
grid-row: row 3 /span gutter;
}
.content {
grid-column: col 5 / span gutter 8;
grid-row: row 2 / span gutter;
}
.panel {
grid-column: col / span gutter 4;
grid-row: row 2 / span gutter;
Slide 81
Slide 81 text
I change three values to
make our panel extend to
the foot of the page.
.mainheader {
grid-column: col / span gutter 12;
grid-row: row /span gutter;
}
.mainfooter {
grid-column: col 5 / span gutter 8;
grid-row: row 3 /span gutter;
}
.content {
grid-column: col 5 / span gutter 8;
grid-row: row 2 / span gutter;
}
.panel {
grid-column: col / span gutter 4;
grid-row: row 2 / span gutter 2;
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Grid Item Placement Algorithm
Slide 84
Slide 84 text
http://dev.w3.org/csswg/css-grid/#grid-item-placement-algorithm
“The following grid item placement
algorithm resolves automatic positions of
grid items into definite positions, ensuring
that every grid item has a well-defined grid
area to lay out into.”
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
My markup is an
unordered list with a
class of wrapper.
The first list item
contains text. The rest an
image.
Two list items have a
class of ‘wide’.
…
-
Balloons 1
-
Balloons 2
-
Balloons 3
-
Balloons 4
-
Balloons 5
-
Balloons 6
-
Balloons 7
-
Balloons 8
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
Narrow screen layout,
before any media queries.
A single column, single
row grid.
Grid layout will create
implicit rows for any
additional list items.
.wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: dense;
}
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
At a 460 pixel breakpoint
we redefine the grid to
have two equal columns.
With grid-auto-flow set
to dense gaps are not left
in the grid if they can be
filled.
@media (min-width: 460px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
.text {
grid-column: 1 / 3;
}
.wide {
grid-column: auto / span 2;
}
}
Slide 91
Slide 91 text
At a 460 pixel breakpoint
we redefine the grid to
have two equal columns.
With grid-auto-flow set
to dense gaps are not left
in the grid if they can be
filled.
@media (min-width: 460px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
.text {
grid-column: 1 / 3;
}
.wide {
grid-column: auto / span 2;
}
}
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
We move to 4 equal
columns at 660 pixels.
I position the li with a
class of text between
column lines 2 and 4, and
row lines 1 and 3.
@media (min-width: 660px) {
.wrapper {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.text {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
}
Slide 94
Slide 94 text
http://gridbyexample.com/examples/code/layout8.html
Slide 95
Slide 95 text
The complete CSS for this
grid.
.wrapper {
display: grid;
max-width: 960px;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: dense;
}
@media (min-width: 460px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
.text {
grid-column: 1 / 3;
}
.wide {
grid-column: auto / span 2;
}
}
@media (min-width: 660px) {
.wrapper {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.text {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
}
Slide 96
Slide 96 text
We change the value of
grid-auto-flow to sparse.
.wrapper {
display: grid;
max-width: 960px;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: sparse;
}
@media (min-width: 460px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
.text {
grid-column: 1 / 3;
}
.wide {
grid-column: auto / span 2;
}
}
@media (min-width: 660px) {
.wrapper {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.text {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
}
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
Grid Gotchas
Slide 101
Slide 101 text
The Gutter Problem
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Defining the 12 column
grid.
We define Grid Tracks
that will be used as
columns, preceded by a
line named ‘col’ and those
used as gutters, preceded
by a line named ‘gutter’.
.wrapper {
display: grid;
grid-template-columns:
repeat(11, (col) 4fr (gutter) 3.5fr ) (col) 4fr (gutter);
grid-template-rows:
auto repeat(4, (row) auto (gutter) 15px);
}
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
A proposal for column-gap and row-gap
has been shifted to Level 2 of the CSS
Grid Specification.
Slide 106
Slide 106 text
With dynamic content we
may not know how many
rows we will need in a
Grid. Grid will create
implicit row lines for
extra content - but won’t
add a gutter track for us. .wrapper {
display: grid;
grid-template-columns:
repeat(11, (col) 4fr (gutter) 3.5fr ) (col) 4fr
(gutter);
grid-template-rows:
auto repeat(4, (row) auto (gutter) 15px);
}
Slide 107
Slide 107 text
Level 1 includes the ability
to repeat a pattern auto
number of times.
This is currently not
implemented.
.wrapper {
display: grid;
grid-template-columns:
repeat(11, (col) 4fr (gutter) 3.5fr ) (col) 4fr
(gutter);
grid-template-rows:
auto repeat(auto, (row) auto (gutter) 15px);
}
Slide 108
Slide 108 text
Nested Grids and Subgrids
Slide 109
Slide 109 text
In this markup the boxes
e, f and g are children of
the element with a class
of d.
A
B
C
E
F
G
Slide 110
Slide 110 text
I have declared a grid on
the wrapper div, and
positioned the immediate
children - the elements
with classes a to d.
.wrapper {
display: grid;
grid-template-columns:
repeat(4, (col) 150px (gutter) 10px);
grid-template-rows:
repeat(2, (row) auto (gutter) 10px );
}
.a {
grid-column: col / span gutter 2;
grid-row: row;
}
.b {
grid-column: col 3 / span gutter 2;
grid-row: row;
}
.c {
grid-column: col / span gutter 2;
grid-row: row 2;
}
.d{
grid-column: col 3 / span gutter 2;
grid-row: row 2;
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
To make box d a grid itself
I declare a grid as normal
then position the children
of this element.
They take their grid lines
from the grid declared on
box d.
.d{
grid-column: col 3 / span gutter 2;
grid-row: row 2;
display: grid;
grid-template-columns: 1fr 10px 1fr;
grid-template-rows: auto 10px auto;
}
.e {
grid-column: 1 / 4;
grid-row: 1;
}
.f {
grid-column: 1;
grid-row: 3;
}
.g {
grid-column: 3;
grid-row: 3;
}
Slide 113
Slide 113 text
http://gridbyexample.com/examples/code/example21.html
Slide 114
Slide 114 text
Declaring a subgrid
Slide 115
Slide 115 text
In our existing layout we
are creating a completely
new grid on box d.
.d{
grid-column: col 3 / span gutter 2;
grid-row: row 2;
display: grid;
grid-template-columns: 1fr 10px 1fr;
grid-template-rows: auto 10px auto;
}
Slide 116
Slide 116 text
If we declare that this
grid is a subgrid, we can
then position the children
of this element on the
same grid their parent is
placed on. .d{
grid-column: col 3 / span gutter 2;
grid-row: row 2;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
Slide 117
Slide 117 text
http://dev.w3.org/csswg/css-grid/
“The following features are at-risk, and may
be dropped during the CR period:
the subgrid value of grid-template-columns
and grid-template-rows, and its component
parts individually”
Slide 118
Slide 118 text
Grid needs your feedback!
Enable Experimental Web Platform Features in Chrome.
Play with my examples and think up ways you would use Grid.
Follow the CSS Grid conversation on www-style by searching for
[css-grid].
See the current issues in the Editor’s Draft http://dev.w3.org/
csswg/css-grid/#issues-index
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
Browser Support
All my examples work in Chrome unprefixed - you need to enable
the Experimental Web Platform Features flag.
You can also use Webkit nightlies, with the -webkit prefix.
The work in Blink and Webkit is being done by Igalia, sponsored by
Bloomberg.
IE10 and up has support for the old syntax, with an -ms prefix.
Mozilla are currently implementing Grid in Firefox.
There is a Polyfill under active development: https://github.com/
FremyCompany/css-grid-polyfill/
Slide 122
Slide 122 text
All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
Slide 123
Slide 123 text
Thank you!
@rachelandrew