Solving Layout Problems with CSS Grid & Friends - DevFest17

Solving Layout problems  
with CSS Grid & friends
Rachel Andrew @ #DevFest17

Rachel Andrew - I do stuff on the web.
▸ @rachelandrew on Twitter
▸ https://rachelandrew.co.uk
▸ Invited Expert to the CSS Working Group
▸ Google Developer Expert
▸ co-founder Perch and Perch Runway CMS - https://grabaperch.com
▸ Smashing Magazine Editor in Chief

… why not
use Flexbox?
So, about this Grid thing …

Do you need layout in  
one dimension or two?

2 dimensional - layout as a row
Layout  
as a  
column

Grid works from the container in

Every other method of creating a grid,
involves sizing the individual items.

.col {
padding: 10px;
margin-bottom: 1em;
margin-left: 2.093333%;
width: 6.20%;
float: left;
}
.row::after {
content: "";
display: block;
clear: both;
}
.col.span2 {
width: calc((6.20%*2) + 2.093333%);
}
A float based “grid”
We have to give the items a width. By
stacking these carefully sized items up
we get the appearance of a grid.
https://codepen.io/rachelandrew/pen/brjymK

row wrapper
(6.20%*4) + (2.093333%*3)

There is no grid. We made it look like
there is a grid by the fact things line up.

.wrapper .row {
display: flex;
flex-wrap: wrap;
}
.col {
padding: 10px;
margin-bottom: 1em;
margin-left: 2.093333%;
width: 6.20%;
flex: 0 0 auto;
}
.col.span2 {
width: calc((6.20%*2) + 2.093333%);
}
A flexbox “grid”
Using the width as the ﬂex-basis.
https://codepen.io/rachelandrew/pen/KvBLbJ

row wrapper as ﬂex container
(6.20%*4) + (2.093333%*3)

.wrapper {
display: grid;
grid-template-columns:
repeat(12, minmax(0,1fr));
grid-gap: 20px;
}
.col.span2 {
grid-column: auto / span 2;
}
A Grid … grid
No row wrappers. No sizing information
on the items, just an instruction on how
many columns to span.
https://codepen.io/rachelandrew/pen/VzBOJW

Grid container
grid-column: 2 / span 4;
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr

Grid frameworks create something that
looks like a grid by controlling item size.

CSS Grid Layout creates an actual grid
and you place items into it.

CSS Grid Layout is a native CSS
framework. Built into the browser.

Sizing Grid
Tracks
Precision & Flexibility

Grid container width
minmax(200px, 1fr)

.grid-wrapper {
display: grid;
grid-gap: 20px;
repeat(auto-fill,minmax(200px, 1fr));
}
repeat()

.grid-wrapper {
display: grid;
grid-gap: 20px;
}
auto-fill

.grid-wrapper {
display: grid;
grid-gap: 20px;
}
minmax()

The fr unit - distributing available space

.wrapper {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 20px;
}
The fr unit
With this track listing the available
spaces divided into 4.
https://codepen.io/rachelandrew/pen/BdeqoJ

.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 400px;
grid-gap: 20px;
}
The fr unit
Mix absolute length units and fr units.
https://codepen.io/rachelandrew/pen/RZYZad

.wrapper {
display: grid;
repeat(12, minmax(0,1fr));
grid-gap: 20px;
}
The fr unit
Creating a 12 column ﬂexible grid with
no percentage calculations.
https://codepen.io/rachelandrew/pen/VzBOJW

grid-template-columns: repeat(12,minmax(0,1fr));
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr

The fr unit replaces percentages in most
cases when using grid layout.

Solving Layout Problems with CSS Grid & Friends - DevFest17

.panel {
max-width: 800px;
display: grid;
grid-template-columns: 2fr 3fr;
grid-auto-rows: minmax(200px, auto);
grid-gap: 1px;
}
minmax()
Row tracks will be 200 pixels tall unless
there is more content, in which case
they will grow as the max is auto.
https://codepen.io/rachelandrew/pen/Mvqvbm

minmax(200px, auto)
minmax(200px, auto)
minmax(200px, auto)
minmax(200px, auto)
200px

minmax(200px, auto)
minmax(200px, auto)
minmax(200px, auto)
auto

figure {
display: grid;
grid-template-rows: 1fr minmax(100px,
auto);
}
figure img {
grid-row: 1 / -1;
grid-column: 1;
object-fit: cover;
height: 100%;
width: 100%;
}
figure figcaption {
grid-row: 2;
grid-column: 1;
padding: 20px;
}
Nested grids
The ﬁgure is a grid item that also
becomes a grid container, so we can
make use of the ability to layer items on
the grid.
https://codepen.io/rachelandrew/pen/xLePZY

New sizing keywords from the CSS
Sizing speciﬁcation

CSS Intrinsic & Extrinsic Sizing Module Level 3: https://www.w3.org/TR/css-sizing-3/
▸ min-content
▸ max-content
▸ ﬁt-content

.wrapper {
display: grid;
grid-template-columns: min-content 1fr 1fr;
grid-gap: 20px;
}
min-content
Roughly, the inline size that would ﬁt
around its contents if all soft wrap
opportunities within the box were
taken.
https://codepen.io/rachelandrew/pen/xLejpK

.wrapper {
display: grid;
grid-template-columns: max-content 1fr 1fr;
grid-gap: 20px;
}
max-content
Usually the narrowest inline size it could
take while ﬁtting around its contents
if none of the soft wrap opportunities
within the box were taken.
https://codepen.io/rachelandrew/pen/KvYRZB

.wrapper {
display: grid;
grid-template-columns: fit-
content(200px) fit-content(200px) 1fr;
grid-gap: 20px;
}
fit-content
If the available space in a given axis is
ﬁnite, equal to min(max-content size,
max(min-content size,stretch-ﬁt size)).
Otherwise, equal to the max-content
size in that axis.
https://codepen.io/rachelandrew/pen/NvLvRG

1fr
ﬁt-content(200px)
ﬁt-content(200px)

CSS is here
to help
Dealing with old browsers

.grid > div {
float: left;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, auto);
width: 500px;
}
.grid > div {
// I’m now a grid item, and act as if I
am not floated!
}
Float & clear properties
Have no effect on a grid item. You can
ﬂoat an item for old browsers then try it
into a grid item for new ones.
https://codepen.io/rachelandrew/pen/NvmMOM

.grid > div {
display: inline-block;
}
.grid {
display: grid;
grid-gap: 10px;
width: 500px;
}
.grid > div {
// I’m now a grid item, inline-block
behaviour such as preserving white space is
gone.
}
Display: inline-block
An inline-block item that becomes a grid
item loses any attributes that would
apply when it was inline-block.
https://codepen.io/rachelandrew/pen/LjvmXG

.grid > div {
display: table-cell;
vertical-align: top;
}
.grid {
border-spacing: 10px;
}
.grid {
display: grid;
grid-gap: 10px;
width: 500px;
}
Display: table
Anonymous element creation does not
happen if an item with display: table-cell
or another table-* property becomes a
grid item.
https://codepen.io/rachelandrew/pen/OjGZaO

.grid > div {
display: inline-block;
vertical-align: top;
}
.grid {
display: grid;
grid-gap: 10px;
width: 500px;
}
vertical-align
Can be used as a fallback for the Box
Alignment properties in inline-block or
table layout and stops applying when
the item becomes a grid item.
https://codepen.io/rachelandrew/pen/NvmMEM

.grid {
column-count: 3;
width: 500px;
}
.grid {
display: grid;
grid-gap: 10px;
}
Multiple-column layout
Can be used as a fallback for some grid
layouts, and the column-* properties
cease to apply once the container
becomes a grid container.
https://codepen.io/rachelandrew/pen/MvRGzL

.grid {
display: flex;
align-items: center;
width: 500px;
height: 200px;
border: 1px dotted #694486;
}
.grid > div {
flex: 1;
}
.grid {
display: grid;
grid-gap: 10px;
}
Flex Layout
Flexbox can also be used as a fallback,
making things easier as they both use
the Box Alignment properties.
https://codepen.io/rachelandrew/pen/MvRGzx

Use the cascade. Write code for old
browsers then code for new browsers.

.grid > div {
float: left;
width: 33.333%;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
width: 500px;
}
A problem!
The width set to make the ﬂoated item
the right size to ﬁt into our layout will be
interpreted on the grid item as a
percentage of the grid track.

.grid > div {
float: left;
width: 33.333%;
}
@supports (display: grid) {
.grid > div {
width: auto;
}
}
.grid {
display: grid;
grid-gap: 10px;
width: 500px;
}
Feature Queries
Test for support of a property and value.
Inside the Feature Query add code only
for browsers that claim support.
https://codepen.io/rachelandrew/pen/ayxGPz

The fundamentals of CSS haven’t
changed

.grid {
display: grid;
max-width: 960px;
margin: 0 auto;
grid-gap: 20px;
}
CSS Grid
Creating a three column layout on the
parent element with fr units.

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

.card {
border: 4px solid rgb(24,154,153);
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.
https://codepen.io/rachelandrew/pen/ZyWmVM

Subgrid Links & 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/

.grid {
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(auto-fill,
minmax(160px, 1fr));
}
.grid > div:nth-child(1) {
grid-row-end: span 2;
}
}
}
grid-column-end: span 2;
}
Using auto-placement
Allowing items to auto-place with
certain items spanning rows and
columns.
https://codepen.io/rachelandrew/pen/NvmZeR

.grid {
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(auto-
fill, minmax(160px, 1fr));
grid-auto-flow: dense;
}
Set auto-flow to dense
Grid will backﬁll gaps taking items out of
document order visually.
https://codepen.io/rachelandrew/pen/WEWqWR

Masonry Layouts
▸ https://rachelandrew.co.uk/archives/2017/01/18/css-grid-one-layout-method-not-
the-only-layout-method/
▸ https://github.com/w3c/csswg-drafts/issues/945

Styling grid
cells
Next for Grid

.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; }
The layout
Using grid-template-areas - the ascii-art
method of laying things out on the grid.
https://codepen.io/rachelandrew/pen/qjdzwR

title
content-top
full-width
content-bottom
full-widthfull-width

.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; }
Named Areas create Named Lines
Each named area creates 4 lines. These
are named with the name of the area
plus -start and -end for columns and
rows.
The area title has title-start and title-
end for row and column.

full-width-start
title-start
title-endcontent-top-endcontent-bottom-end
title-end content-top-start
content-top-end full-width-start
full-width-end content-bottom-start
content-bottom-end
title-startcontent-top-startcontent-bottom-start
full-width-end

title-start
content-top-end
content-bottom-end
content-top-start

.grid::after {
content: "";
background-color: #fff;
border: 4px solid rgb(182,222,211);
grid-column:
content-top-start / content-top-end;
grid-row:
title-start / content-bottom-end;
z-index: -1;
}
Generated content
Positioned using the named lines
created from our named areas.

Solve problems and  
share what you ﬁnd out.

Grid Resources
▸ Visit Grid by Example for worked examples, patterns with fallbacks, and a free video
tutorial: https://gridbyexample.com
▸ I created a huge set of guides for MDN:  
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
▸ Over 5 years of grid thoughts on my site at: 
https://rachelandrew.co.uk/archives/tag/cssgrid
▸ GridBugs! I’m collecting and trying to get ﬁxed interop issues: 
https://github.com/rachelandrew/gridbugs

The New  
CSS Layout
Out now!

Thank you!
@rachelandrew 
Slides & Resources: https://rachelandrew.co.uk/speaking/event/gdg-london-2017

Solving Layout Problems with CSS Grid & Friends - DevFest17

Recommended

More Related Content

What's hot (20)

Similar to Solving Layout Problems with CSS Grid & Friends - DevFest17 (17)

More from Rachel Andrew (7)

Recently uploaded (20)

Solving Layout Problems with CSS Grid & Friends - DevFest17