Devoxx Belgium: CSS Grid Layout

CSS Grid Layout
Rachel Andrew
Devoxx.be, November 2015
Tweet @rachelandrew #devoxx #cssgrid

Rachel Andrew
http://rachelandrew.co.uk
@rachelandrew
http://grabaperch.com

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

https://www.ﬂickr.com/photos/zervas/2810241612
Flexbox?

Seeing Flexbox as the silver bullet for
layout issues is likely to lead us down
another path of layout hacks.

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

We need a designed for purpose
layout system for the sites and
applications we develop today.

Our HTML consists of a
div with a class of
wrapper and two child
elements, a and b.
<div class="wrapper">
<div class="a">A</div>
<div class="b">B</div>
</div>

To create a grid we use a
new value of the display
property.
display: grid
.wrapper {
display: grid;
}

We describe the grid using
the new properties:
grid-template-columns
grid-template-rows
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: auto auto;
}

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

To position an item bottom
centre, I start at column
line 2 and end at column
line 3.
.b {
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}

To span more tracks we
just change the end row or
column line.
.b {
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
http://bit.ly/aeasf-simple

The longhand for line-
based placement means
up to 4 properties to
position each element. .a {
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}

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: 2 / 4;
grid-row: 2 / 3;
}

Declare all 4 values using
the grid-area property.
.a {
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 2 / 2 / 3 / 4;
}

Grid lines relate to writing mode. In
a right to left language such as
Arabic the first column line is the
right-hand line.

Grid Lines
Lines can be horizontal or vertical. They
are referred to by number and can be
named.
Highlighted is Column Line 2.

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.

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.

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.

All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.

The HTML around my
page content.
The various areas of my
page are child elements
of a div with a class of
wrapper.
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
</div>

Declaring a grid on
wrapper.
The grid has two columns
and two rows, making 3
column lines and 3 row
lines.
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 4fr;
grid-column-gap: 2em;
grid-row-gap: 20px;
}

The fr unit
• Assigns to the track a fraction of the available
space in the container. 
• Before fractions are calculated the space
assigned to any fixed width tracks and gaps is
removed. 
• Acts in a similar way to flex-grow in Flexbox.

Grid Layout
I am creating three grid
column tracks, all 1fr in
width.
This gives me three equally
sized column tracks.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Grid Layout
If I create the first column
as 600 pixels and then
have two 1fr columns the
600 pixel track is removed
from the available space
and the remainder is
distributed equally
between the two columns.
.wrapper {
display: grid;
grid-template-columns: 600px 1fr 1fr;
}

Grid Layout
With a 600 pixel column, a
1fr and a 3fr column. The
600 pixels is removed from
the available space then
the remaining space is
divided by 4.
The 1fr column gets 25%
and the 3fr column 75%.
.wrapper {
display: grid;
grid-template-columns: 600px 1fr 3fr;
}

http://alistapart.com/article/holygrail
Three columns. One fixed-width
sidebar for your navigation, another
for, say, your Google Ads or your Flickr
photos—and, as in a fancy truffle, a
liquid center for the real substance.

Grid Layout
CSS Grid “Holy Grail”. //css
.wrapper {
display: grid;
grid-template-columns: 300px 1fr 300px;
grid-template-rows: auto;
grid-column-gap: 20px;
}
.header { grid-column: 1 / 4; }
.content { grid-column: 2 / 3; grid-row: 2 / 3; }
.side1 { grid-column: 1 / 2; grid-row: 2 / 3; }
.side2 { grid-column: 3 / 4; grid-row: 2 / 3; }
.footer { grid-column: 1 / 4; grid-row: 3 / 4; }
//html
<header class="header">This is the header</header>
<article class="content"></article>
<div class="side1"></div>
<div class="side2"></div>
<footer class="footer"></div>
</div>

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 / 3;
grid-row: 1 / 2;
}
.panel {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.content {
grid-column: 2 / 3;
grid-row: 2 / 3;
}

http://bit.ly/aeasf-line-based1

I can add a footer to this
layout.
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
<footer class="mainfooter"></footer>
</div>

Positioning the footer
between row lines three
and four.
.mainfooter {
grid-column: 1 / 3;
grid-row: 3 / 4;
}

Our grid only has 3 row
lines specified - yet we
placed an item between
row lines 3 and 4.
Grid creates an implicit
grid line for us.
.wrapper {
display: grid;
grid-row-gap: 20px;
}
.mainfooter {
grid-column: 1 / 3;
grid-row: 3 / 4;
}

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.

For many layouts you may
be able to not specify
grid-template-rows at all.
Grid will create rows as
you position content.
.wrapper {
display: grid;
grid-row-gap: 20px;
}

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.

Using Grid to order the
page elements in a single
column for narrow screen
widths.
.wrapper {
display: grid;
grid-row-gap: 10px;
}
.mainheader {
grid-row: 1 / 2;
}
.content {
grid-row: 2 / 3;
}
.panel {
grid-row: 3 / 4;
}
.mainfooter {
grid-row: 4 / 5;
}

Redefine the Grid at min-
width 550 pixels.
Position items as in the
earlier example.
@media (min-width: 550px) {
.wrapper {
grid-row-gap: 20px;
}
.mainheader {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.panel {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.content {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.mainfooter {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
}

http://bit.ly/aeasf-named-lines

Name lines with the name
in square brackets.
Remember we are naming
grid lines and not grid
tracks. .wrapper {
display: grid;
grid-row-gap: 10px;
grid-template-rows:
[row-header-start] auto
[row-content-start] auto
[row-panel-start] auto
[row-footer-start] auto [row-footer-end];
}

Here we are positioning
based on line numbers.
.mainheader {
grid-row: 1 / 2;
}
.content {
grid-row: 2 / 3;
}
.panel {
grid-row: 3 / 4;
}
.mainfooter {
grid-row: 4 / 5;
}

Here we are positioning
by named lines.
.mainheader {
grid-row: row-header-start;
}
.content {
grid-row: row-content-start;
}
.panel {
grid-row: row-panel-start;
}
.mainfooter {
grid-row: row-footer-start;
}

http://bit.ly/aeasf-template-areas

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

Describe the layout on
the parent element using
the grid-template-areas
property.
.wrapper {
display: grid;
grid-row-gap: 10px;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}

Redefining the template
areas for the wider
layout.
.wrapper {
grid-row-gap: 20px;
"header header"
"sidebar content"
"footer footer"
}
}

Repeating the name of an
area causes the area to
span across those grid
cells.
This can be seen in the
header and footer of this
layout.
.wrapper {
grid-row-gap: 20px;
"header header"
"sidebar content"
"footer footer"
}
}

Repeating the name of an
area causes the area to
span across those grid
cells.
This can be seen in the
header and footer of this
layout.
.wrapper {
grid-row-gap: 20px;
"header header"
"sidebar content"
" . footer"
}
}

Named grid areas create
four implicit named lines.
You can use these in the
same way as lines you
have explicitly named.
.wrapper {
.wrapper {
grid-row-gap: 20px;
"header header"
"sidebar content"
"footer footer"
}
}
.test {
z-index: 100;
background-color: red;
grid-column: content-start / content-end;
grid-row: content-start / footer-end;
}

Items on the Grid can be layered
using the z-index property.

The Bootstrap grid, and
those in other
frameworks relies on our
describing the layout in
the markup.

<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
</div>

<div class="row">
</div>

<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>

With CSS Grid Layout we describe the
layout in the CSS and can redefine
that description at any breakpoint.

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 100 pixel
wide track.
grid-template-columns: repeat(4, 200px 100px);

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-a] 200px [col-b] 100px);
}
.content {
grid-column: col-a 2 / span 2;
}
.aside {
grid-column: col-a 2 / span col-b 2;
}

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.
<div class="container">
<h1>Skeleton Grid</h1>
<div class="example-grid">
<div class="row">
<div class="four columns">Four columns</div>
</div>
<div class="row">
<div class="eight columns">Eight columns</div>
</div>
<div class="row">
<div class="three columns">Three columns</div>
</div>
<div class="row">
<div class="six columns">Six columns</div>
<div class="six columns">Six columns</div>
</div>
</div>

When using CSS Grid
Layout we have no need
to describe our grid in
markup.
<div class="wrapper skeleton">
<h1 class="header">CSS Grid Layout Version</h1>
<div class="box1">Four columns</div>
<div class="box4">Eight columns</div>
<div class="box6">Three columns</div>
<div class="box10">Six columns</div>
<div class="box11">Six columns</div>
</div>

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(12, [col] 1fr );
grid-template-rows: repeat(5, [row] auto) ;
grid-row-gap: 15px;
}

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.
The box is placed in the
first line named row and
spans 1 line - the default.
.box1 {
grid-column: col / span 4;
grid-row: row ;
}

Placing box8 on the grid.
Starting on column line 7,
spanning 3 lines.
In the 3rd row named row,
spanning 1 line.
.box8 {
grid-column: col 7 / span 3;
grid-row: row 3 ;
}

With Grid Layout we can
easily span rows just like
columns.
.box1b {
grid-row: row / span 2;
}
.box2b {
grid-row: row / span 3;
}

The header and footer
span the full grid.
The content and panel
display side by side.
.mainheader {
grid-row: row ;
}
.mainfooter {
grid-row: row 3 ;
}
.content {
grid-row: row 2 ;
}
.panel {
grid-row: row 2 ;
}

http://bit.ly/aeasf-12col-layout

I change three values to
make our panel extend to
the foot of the page.
.mainheader {
grid-row: row ;
}
.mainfooter {
grid-row: row 3 ;
}
.content {
grid-row: row 2 ;
}
.panel {
grid-row: row 2 / span 2 ;
}

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.”

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’.
<ul class="wrapper">
<li class="text"><p>…</p></li>
<li><img src="../images/balloon1.jpg" alt="hot air balloon" />
<p>Balloons 1</p></li>
<li class="wide"><img src="../images/balloon4.jpg" alt="hot air
balloon" />
<li class="wide"><img src="../images/balloon7.jpg" alt="hot air
balloon" />
</ul>

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-auto-flow: dense;
}

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.
.wrapper {
}
.text {
grid-column: 1 / 3;
}
.wide {
grid-column: auto / span 2;
}
}

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.
.wrapper {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.text {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
}

The complete CSS for this
grid.
.wrapper {
display: grid;
max-width: 960px;
grid-auto-flow: dense;
}
.wrapper {
}
.text {
grid-column: 1 / 3;
}
.wide {
}
}
.wrapper {
}
.text {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
}

We change the value of
grid-auto-flow to sparse.
.wrapper {
display: grid;
max-width: 960px;
grid-auto-flow: sparse;
}
.wrapper {
}
.text {
grid-column: 1 / 3;
}
.wide {
}
}
.wrapper {
}
.text {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
}

Grid and the Box Alignment Module

CSS Box Alignment Module Level 3
“This module contains the features of CSS relating to the
alignment of boxes within their containers in the various CSS box
layout models: block layout, table layout, flex layout, and grid
layout.” - https://drafts.csswg.org/css-align/

Grid Layout
Creating a grid with the
align-items property set
to centre.
All items will be centered
inside their grid area.
.wrapper {
display: grid;
align-items: center;
grid-template-columns: repeat(5, 150px 10px) 150px;
grid-template-rows: 150px 10px 150px 10px 150px 10px 150px;
}
.a {
grid-column: 1 / 4;
grid-row: 1 / 4;
}
.b {
grid-column: 5 / 8;
grid-row: 1 / 4;
}
.c {
grid-column: 1 / 4;
grid-row: 5 / 10;
}
.d {
grid-column: 5 / 8;
grid-row: 5 / 10;
}
.e {
grid-column: 9 / 12;
grid-row: 1 / 10;
}

http://gridbyexample.com/examples/#example24

Grid Layout
Creating a grid with the
justify-items property set
to centre.
All items will be centered
horizontally inside their
grid area.
.wrapper {
display: grid;
justify-items: center;
grid-template-columns: repeat(5, 150px 10px) 150px;
grid-template-rows: 150px 10px 150px 10px 150px 10px
150px;
}
.a {
grid-column: 1 / 4;
grid-row: 1 / 4;
}
.b {
grid-column: 5 / 8;
grid-row: 1 / 4;
}
.c {
grid-column: 1 / 4;
grid-row: 5 / 10;
}
.d {
grid-column: 5 / 8;
grid-row: 5 / 10;
}
.e {
grid-row: 1 / 10;
}

Grid Layout
As with flexbox we can
use align-self and justify-
self to target individual
grid items.
.a {
grid-column: 1 / 4;
grid-row: 1 / 4;
align-self: stretch;
}
.b {
grid-column: 5 / 8;
grid-row: 1 / 4;
align-self: end;
}
.c {
grid-column: 1 / 4;
grid-row: 5 / 10;
align-self: start;
}
.d {
grid-column: 5 / 8;
grid-row: 5 / 10;
align-self: center;
}
.e {
grid-row: 1 / 10;
}

With great power comes
responsibility.

Power and responsibility
• Good = creating the most accessible source
order and using Grid or Flexbox to get the
optimal display for each device.
• Bad = using Grid or Flexbox as an excuse to
forget about the source.
• Terrible - stripping out semantic elements to
make everything a grid or flex item.

https://drafts.csswg.org/css-grid/#source-independence
Grid item placement and reordering
must not be used as a substitute for
correct source ordering, as that can
ruin the accessibility of the document.

http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html

https://rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility/

In this markup the boxes
e, f and g are children of
the element with a class
of d.
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
</div>
</div>

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-gap: 10px;
grid-template-columns:
repeat(4, [col] 150px);
repeat(2, [row] auto);
}
.a {
grid-row: row;
}
.b {
grid-row: row;
}
.c {
grid-row: row 2;
}
.d{
grid-row: row 2;
}

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-gap: 10px;
}
.e {
grid-column: 1 / 3;
grid-row: 1;
}
.f {
grid-column: 1;
grid-row: 2;
}
.g {
grid-column: 2;
grid-row: 2;
}

In our existing layout we
are creating a completely
new grid on box d.
.d{
grid-row: row 2;
display: grid;
grid-gap: 10px;
}

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-row: row 2;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}

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”

Without subgrid we create the potential for
accessibility problems. Authors may remove
semantic markup in order to use grid layout.

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

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.
Grid is on the Edge backlog, marked as High Priority.
Mozilla are currently implementing Grid in Firefox. Some examples
work in Firefox Nightlies.
There is a Polyfill under active development: https://github.com/
FremyCompany/css-grid-polyfill/

Thank you!
https://rachelandrew.co.uk/presentations/css-grid
@rachelandrew

Devoxx Belgium: CSS Grid Layout

More Related Content

What's hot

Similar to Devoxx Belgium: CSS Grid Layout

More from Rachel Andrew

Recently uploaded

Devoxx Belgium: CSS Grid Layout