Google Developers Experts Summit 2017 - CSS Layout

WHAT I DISCOVERED ABOUT
LAYOUT VIA CSS GRID
@rachelandrew GDE Summit 2017

Rachel Andrew
▸ @rachelandrew on Twitter
▸ https://rachelandrew.co.uk
▸ co-founder Perch and Perch Runway CMS - https://grabaperch.com
▸ Invited Expert to the CSS Working Group
▸ GDE Web Technologies
▸ Student pilot, runner, old nerd.

March 2017 March 2017 March 2017 March 2017 March 2017 October 17 2017

It’s not CSS Vaporware!* 
 
 
*I’m very happy about this

The more I know about CSS, the more
I realise I don’t know.

CSS Grid and friends
▸ CSS Display
▸ Writing Modes
▸ Logical Properties
▸ Box Alignment
▸ Feature Queries

CSS Display: https://drafts.csswg.org/css-display/
“This module describes how the CSS formatting
box tree is generated from the document
element tree and deﬁnes the display property
that controls it.”

CSS Display: https://drafts.csswg.org/css-display/
▸ The Outer Display Type - how does this box behave in relationship to its
parent?
▸ The Inner Display Type - what formatting context does it create for its child
elements?

CSS Grid: https://www.w3.org/TR/css-grid-1/#grid-item-display
“The display value of a grid item is blockified: if
the specified display of an in-flow child of an
element generating a grid container is an inline-
level value, it computes to its block-level
equivalent. ”

CSS Display: https://www.w3.org/TR/css-display/#transformations
“Some layout effects
require blockification or inlinification of the box
type, which sets the box’s outer display type, if it
is not none or contents,
to block or inline (respectively).”

<div class="grid">
<a href="">one</a>
<span>two</span>
<div>three</div>
<img src="img.png" alt="placeholder">
</div>

.grid {
display: grid;
grid-template-columns: repeat(4,200px);
grid-gap: 8px;
height: 200px;
border: 8px solid rgb(3,99,143);
}

.wrapper {
max-width: 800px;
border-spacing: 20px;
}
.image {
display: table-cell;
}
.content {
vertical-align: top;
}

https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
“Any table element will automatically generate
necessary anonymous table objects around itself,
consisting of at least three nested objects
corresponding to a 'table'/'inline-table' element, a
'table-row' element, and a 'table-cell' element.”

CSS Grid: https://www.w3.org/TR/css-grid-1/#grid-item-display
“Note: Some values of display normally trigger the
creation of anonymous boxes around the original
box. If such a box is a grid item, it is blockiﬁed ﬁrst,
and so anonymous box creation will not happen.
For example, two contiguous grid
items with display: table-cell will become two
separate display: block grid items, instead of being
wrapped into a single anonymous table.”

.wrapper {
max-width: 800px;
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 20px;
}
.image {
}
.content {
}
https://codepen.io/rachelandrew/pen/KqMyzN

.grid {
max-width: 800px;
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 20px;
}
@supports (grid-gap: 20px) {
.grid {
margin: 20px;
}
}
.image {
}
.content {
}
https://codepen.io/rachelandrew/pen/qjNVwG

Creating fallbacks
▸ You do not need to write two sets of code
▸ Write your fallback code and then write your grid code
▸ In many cases the spec has you covered
▸ Use Feature Queries to isolate things that would apply to both grid-supporting
and non-supporting browsers

https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks

Google Developers Experts Summit 2017 - CSS Layout

.grid {
display: grid;
max-width: 960px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
CSS Grid
Creating a three column layout with
CSS Grid.
https://codepen.io/rachelandrew/pen/XgdydE

.card {
display: flex;
flex-direction: column;
}
.card .inner {
flex: 1;
}
Make the card a ﬂex item
Allow the inner to grow, it pushes the
footer down to the bottom of the
card.s
https://codepen.io/rachelandrew/pen/XgdydE

.card {
background-color: #fff;
grid-row: auto / span 4;
display: subgrid;
}
display: subgrid
The card is a direct child of the grid
so needs to span four rows of the grid
to make room for the four rows in the
subgridded internals. 
 
display: subgrid means the card now
uses the tracks of the parent grid.

Subgrid links and thoughts
▸ https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-
of-the-css-grid-speciﬁcation/
▸ https://github.com/w3c/csswg-drafts/issues/958
▸ https://github.com/rachelandrew/cssgrid-ama/issues/13
▸ http://meyerweb.com/eric/thoughts/2016/01/15/subgrids-considered-
essential/

Vanishing boxes with display:contents

display: contents https://drafts.csswg.org/css-display/#box-generation
“The element itself does not generate any boxes,
but its children and pseudo-elements still
generate boxes as normal. For the purposes of
box generation and layout, the element must be
treated as if it had been replaced in the element
tree by its contents”

<div class="flex">
<div>One</div>
<div>Two</div>
<div class="nested">
<div>Nested One</div>
<div>Nested Two</div>
</div>
</div>
<div class="grid">
<div>One</div>
<div>Two</div>
<div class="nested">
<div>Nested One</div>
<div>Nested Two</div>
</div>
</div>
https://codepen.io/rachelandrew/pen/GEZPex

.flex {
display: flex;
}
.flex > * {
flex: 1;
}
.grid {
display: grid;
grid-template-columns:
repeat(4,minmax(200px, 1fr));
grid-gap: 8px;
}
.grid > * {
}

.nested {
display: contents;
}
Needs Firefox or Chrome Canary

.flex > * {
flex: 1;
}
.grid > * {
}

.card {
display: contents;
}
display: contents
We add this to the direct child of the
grid container.
https://codepen.io/rachelandrew/pen/QgNJYa

.card {
grid-row: auto / span 4;
display: contents;
}
Make room for the rows
Each card needs four rows.

.card:nth-child(1) h2{ grid-column: 1; grid-row: 1; }
.card:nth-child(1) img{ grid-column: 1; grid-row: 2; }
.card:nth-child(1) .inner{ grid-column: 1; grid-row: 3; }
.card:nth-child(1) footer{ grid-column: 1; grid-row: 4; }
.card:nth-child(4) .inner{ grid-column: 1; grid-row: 7;}
Ugh.
Don’t do this.
https://codepen.io/rachelandrew/pen/QgNJYa

display: contents
▸ Use when the element you are removing has no box styling (e.g. backgrounds
and borders) attached
▸ Current browser support Firefox, Chrome Canary

/* this shorthand */
.a {
grid-area: 1 / 2 / 2 / 5;
}
/* is the same as this */
.a {
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 2;
grid-column-end: 5;
}
The order of values in grid-area
•row-start
•column-start
•row-end
•column-end

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 150px);
grid-template-rows: repeat(3, 100px);
}
.a {
grid-area: 1 / 2 / 2 / 5;
}
.b {
grid-area: 1 / 1 / 3 / 4;
}
https://codepen.io/rachelandrew/pen/BZKbaN

.grid {
Direction: rtl;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 150px);
}
.a {
grid-area: 1 / 2 / 2 / 5;
}
.b {
grid-area: 1 / 1 / 3 / 4;
}
https://codepen.io/rachelandrew/pen/BZKbaN

CSS Logical Properties
“This module introduces logical properties and
values that provide the author with the ability to
control layout through logical, rather than physical,
direction and dimension mappings. The module
deﬁnes logical properties and values for the
features deﬁned in CSS2.1. These properties are
writing-mode relative equivalents of their
corresponding physical properties.”

Logical not Physical
▸ The start of a page rather than the top
▸ The end of a block rather than the right
▸ In grid layout we have start and end for both columns and rows, rather than
referring to the top and bottom of columns and left and right of rows

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3,
150px);
justify-content: end;
align-content: end;
}
https://codepen.io/rachelandrew/pen/pwyBpG
End
End
Start
Start
direction: ltr

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3,
150px);
justify-content: end;
align-content: end;
}
https://codepen.io/rachelandrew/pen/pwyBpG
End
End
Start
Start
direction: rtl

https://rachelandrew.co.uk/css/cheatsheets/box-alignment

https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/

.Prose {
display: grid;
[full-start] minmax(1em, 1fr)
[main-start] minmax(0, 40em) [main-end]
minmax(1em, 1fr) [full-end];
}
.Prose > * {
grid-column: main;
}
.Prose-splash {
grid-column: full;
}
Just do this!
Magic occurs.

<div class="grid">
<div>Content</div>
<div class="gallery">Full width
content</div>
<div>Content</div>
</div>
My markup
A div containing three direct child
elements, one with a class of ‘gallery’.
That’s our full width content.

.grid {
display: grid;
minmax(1em, 1fr)
minmax(0, 660px)
minmax(1em, 1fr);
}
.grid > * {
grid-column: 2 ;
}
.grid > .gallery {
grid-column: 1 / -1 ;
}
A grid with 3 column tracks
Using the line numbers to place our
content and full width items.
https://codepen.io/rachelandrew/pen/mwOmJW

1 2 3 4
grid-column: 2;
grid-column: 1 / 4;
grid-column: 2;

.grid {
display: grid;
[full-start] minmax(1em, 1fr)
[main-start] minmax(0, 660px)
[main-end] minmax(1em, 1fr)
[full-end];
}
.grid > * {
grid-column: main-start;
}
.grid > .gallery {
grid-column: full-start / full-end;
}
Naming lines on the grid
We can now position the items using
their line names.
https://codepen.io/rachelandrew/pen/EXjrJM

full-start main-start main-end full-end

grid-column: full-start / full-end;

grid-column: main;
grid-column: full;
grid-column: main;

.grid {
display: grid;
max-width: 960px;
margin: 0 auto;
grid-template-columns: [full-start]
minmax(1em, 1fr)
[main-start] minmax(0, 660px) [main-end]
}
.grid > * {
grid-column: main;
}
.grid > .gallery {
grid-column: full;
}
‘main’ and ‘full’
These line names don’t exist
anywhere in our grid deﬁnition.

https://www.w3.org/TR/css-grid-1/#implicit-named-areas
“Since a named grid area is referenced by the
implicit named lines it produces, explicitly adding
named lines of the same form (foo-start/foo-end)
eﬀectively creates a named grid area. ”

main-start
main-start
main-end
main-end
main

.grid {
display: grid;
grid-gap: 20px;
100px [main-start]
100px 100px 100px [main-end]
100px 100px;
grid-template-rows:
100px [main-start]
100px 100px [main-end] 100px;
}
.item {
grid-area: main;
}
Implicit named areas
Created by having named lines using
an ident with *-start and *-end.
https://codepen.io/rachelandrew/pen/EXNmvj

.grid {
display: grid;
minmax(1em, 1fr)
[main-start] minmax(0, 660px) [main-
end]
grid-template-rows: auto auto [full-
start] auto [full-end];
}
.grid > * {
}
.grid > .gallery {
grid-area: full;
}
Magic named area
We have deﬁned lines named full-
start and full-end for rows and
columns so we have an area named
full.
https://codepen.io/rachelandrew/pen/jwPjWK

https://www.w3.org/TR/css-grid-1/#line-placement
“Note: Named grid areas automatically generate
implicit named lines of this form, so specifying
grid-row-start: foo will choose the start edge of
that named grid area (unless another line named
foo-start was explicitly speciﬁed before it).”

Named lines create a named area
which in turn can be used as
named lines.

https://www.w3.org/TR/css-grid-1/#placement-shorthands
“[when using grid-row and grid-column
shorthands] … When the second value is omitted,
if the ﬁrst value is a <custom-ident>, the grid-row-
end/grid-column-end longhand is also set to
that <custom-ident>; otherwise, it is set to auto.”

grid-column: main / main;
grid-column: full / full;
grid-column: main / main;
full fullmain main

.grid {
display: grid;
max-width: 960px;
margin: 0 auto;
minmax(1em, 1fr)
[main-start] minmax(0, 660px) [main-end]
}
.grid > * {
grid-column: main;
}
.grid > .gallery {
grid-column: full;
}
Targeting the column track
The line name ‘main’ is created from
the named area created by our
named lines.
https://codepen.io/rachelandrew/pen/owXKMd

.grid {
display: grid;
grid-template-columns: [full-start panel1-start]
1fr 1fr [content-start] 1fr 1fr 1fr 1fr [panel1-
end panel2-start ] 1fr 1fr 1fr 1fr [content-end]
1fr 1fr [panel2-end full-end] ;
}
.grid > * {
grid-column: content;
}
.grid > .gallery {
grid-column: full;
}
.grid > .panel1 {
grid-column: panel1;
padding: 4px;
}
.grid > .panel2 {
grid-column: panel2;
padding: 4px;
}
Extending the example
Adding named areas panel1 and
panel2.
https://codepen.io/rachelandrew/pen/YQXmJJ/

.grid {
display: grid;
grid-template-columns: minmax(1em,
1fr) minmax(0, 660px) minmax(1em, 1fr);
grid-template-areas:
". title ."
". content-top ."
"full-width full-width full-width"
". content-bottom ."
}
h1 { grid-area: title; }
.content1 { grid-area: content-top; }
.content2 { grid-area: content-bottom; }
.gallery { grid-area: full-width; }
Magic Grid Lines
If you have a named area you get grid
lines named *-start and *-end for rows
and columns.
https://codepen.io/rachelandrew/pen/qjdzwR

.grid {
display: grid;
grid-template-columns: minmax(1em,
1fr) minmax(0, 660px) minmax(1em, 1fr);
grid-template-areas:
". title ."
". content-top ."
"full-width full-width full-width"
". content-bottom ."
}
h1 { grid-area: title; }
.content1 { grid-area: content-top; }
.content2 { grid-area: content-bottom; }
.gallery { grid-area: full-width; }
Magic Grid Lines
Each grid-area creates a set of lines
for the start and end of the area -
rows and columns.
For title, we have title-start and title-
end for rows and columns.

.grid::after {
content: "";
grid-column:
content-top-start / content-top-end;
grid-row:
title-start / content-bottom-end;
z-index: -1;
}
Magic Lines
Positioning some generated content
using the magical lines.

Things appearing  
in unexpected places.

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 100px [main-start]
100px 100px [main-end];
}
.a {
grid-column: 1 / 3;
grid-row: 1;
}
.b {
grid-column: 3;
grid-row: 1 / 3;
}
.c {
grid-column: 1;
}
.d {
grid-column: 2;
grid-row: 2;
}
https://codepen.io/rachelandrew/pen/JJYxve/

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 100px [main-
start] 100px 100px [main-end];
}
.e {
grid-area: main;
}

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 100px [main-
start] 100px 100px [main-end];
}
.e {
grid-area: auto/ main;
}

Find out more
I made you some resources
Visit Grid by Example for worked examples, patterns with
fallbacks, and a free video tutorial: 
gridbyexample.com
I created a huge set of guides for MDN:  
https://developer.mozilla.org/en-US/docs/Web/CSS/
CSS_Grid_Layout
Over 4 years of grid thoughts on my site at: 
https://rachelandrew.co.uk/archives/tag/cssgrid
CSS Grid AMA: 
https://github.com/rachelandrew/cssgrid-ama

The New CSS Layout
October 10th 2017

THANK YOU!
@rachelandrew 
 
Resources & code: https://rachelandrew.co.uk/speaking/event/gde-summit-2017

Google Developers Experts Summit 2017 - CSS Layout

Recommended

More Related Content

What's hot (12)

Similar to Google Developers Experts Summit 2017 - CSS Layout (20)

More from Rachel Andrew (19)

Recently uploaded (20)

Google Developers Experts Summit 2017 - CSS Layout