CSS Layout Techniques with Grid and Flexbox

CSS Layout in 2017
with
CSS Grid & Flexbox
Rachel Andrew,  
Laracon Online

Rachel Andrew
rachelandrew.co.uk
@rachelandrew
CSS Working Group Invited Expert
Google Developer Expert for Web Technologies
Co-founder Perch CMS: https://grabaperch.com
Contact: me@rachelandrew.co.uk

Modern CSS Layout?
• Floats
• Inline-block
• display: table
• Absolute & Relative positioning
• Frameworks … lots of frameworks

Our great hopes for layout
• Flexbox 
https://drafts.csswg.org/css-flexbox/
• CSS Grid Layout 
https://drafts.csswg.org/css-grid/
• Box Alignment 
https://drafts.csswg.org/css-align/

Items in our layouts understand
themselves as part of a complete layout.

http://alistapart.com/article/fauxcolumns

http://colintoh.com/blog/display-table-anti-hero

Flexbox
Full height columns with
flexbox, taking advantage
of default alignment values.
.wrapper {
display: flex;
}
.sidebar {
flex: 1 1 30%;
}
.content {
flex: 1 1 70%;
}

Grid Layout
Full height columns in CSS
Grid Layout.
.wrapper {
display: grid;
grid-template-columns: 30% 70%;
}
.sidebar {
grid-column: 1;
}
.content {
grid-column: 2;
}

Separation of source and display

Flexbox
The flex-direction property
can take a value of row to
display things as a row or
column to display them as
a column.
nav ul{
display: flex;
justify-content: space-between;
flex-direction: row;
}

Flexbox
The visual order can be
switched using row-
reverse or column-reverse.
nav ul{
display: flex;
flex-direction: row-reverse;
}

Flexbox
Adding display: flex to our
container element causes
the items to display flexibly
in a row.
.wrapper {
display: flex;
}

Flexbox
The order property means
we can change the order of
flex items using CSS.
This does not change their
source order.
li:nth-child(1) {
order: 3;
}
li:nth-child(2) {
order: 1;
}
li:nth-child(3) {
order: 4;
}
li:nth-child(4) {
order: 2;
}

Grid Layout
I have created a grid on
my wrapper element.
The grid has 3 equal
width columns.
Rows will be created as
required as we position
items into them.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Grid Layout
I am positioning my
elements using CSS Grid
Layout line-based
positioning.
Setting a column and a
row line using the grid-
column and grid-row
properties.
li:nth-child(1) {
grid-column: 3 ;
grid-row: 2 ;
}
li:nth-child(2) {
grid-column: 1 ;
grid-row: 2 ;
}
li:nth-child(3) {
grid-column: 1 ;
grid-row: 1 ;
}
li:nth-child(4) {
grid-column: 2 ;
grid-row: 1 ;
}

CSS Grid automatic placement
http://www.w3.org/TR/2015/WD-css-grid-1-20150917/#grid-auto-
flow-property
https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-
automatic-placement-and-packing-modes/

Grid Layout
When using automatic
placement we can create
rules for items in our
document - for example
displaying portrait and
landscape images
differently.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}
.landscape {
grid-column-end: span 2;
}

grid-auto-flow
The default value of grid-auto-flow is
sparse. Grid will move forward planning
items skipping cells if items do not fit .

Grid Layout
With a dense packing
mode grid will move items
out of source order to
backfill spaces.
.wrapper {
display: grid;
grid-template-rows: auto;
grid-auto-flow: dense;
}
.landscape {
grid-column-end: span 2;
}

grid-auto-flow
With grid-auto-flow dense items are
displayed out of source order. Grid
backfills any suitable gaps.

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-flexbox/#order-accessibility
Authors must use order only for visual,
not logical, reordering of content. Style
sheets that use order to perform
logical reordering are non-conforming.

Léonie Watson | On CSS accessibility
and drinking tea | CSS Day 2016
https://vimeo.com/180566024

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/

It’s 2017. We can now centre things.

Box Alignment Properties
justify-content
align-content
justify-self
align-self
justify-items
align-items

Flexbox
The justify-content
property is set to space-
between.
The items at each end are
placed against the
container and the
remaining space
distributed evenly.
nav ul{
display: flex;
flex-direction: row;
}

Grid
If there is space in the grid
container after all column
and row tracks have been
added.
Use space-around and
space-between to space
the tracks.
.wrapper {
width: 500px;
height: 400px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 80px);
grid-template-rows: repeat(3,100px);
align-content: space-around;
}

I can create this same
layout with flexbox or Grid.
With flexbox the items are
laid out in a row.
.wrapper {
display: flex;
}
.wrapper li {
flex: 1 0 25%;
}

The first item is at the
default stretch and as the
tallest item is dictating the
height of the flex container.
The second is entered in
the container.
The third aligned to the
start.
The fourth aligned to the
end.
.wrapper li:nth-child(2) {
align-self: center;
}
align-self: flex-start;
}
align-self: flex-end;
}

For Grid I use a single row,
4 column Grid.
.wrapper {
display: grid;
}

Grid alignment properties
for the three landscape
images.
align-self: center;
}
align-self: start;
}
align-self: end;
}

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

Ethan Marcotte, Fluid Grids
“… every aspect of the grid—and the
elements laid upon it—can be
expressed as a proportion relative to
its container.”

target ÷ context = result
h1 {
margin-left: 14.575%; /* 144px / 988px = 0.14575 */
width: 70.85%; /* 700px / 988px = 0.7085 */
}

Flexbox
The most simple flexbox
example demonstrates
the inherent flexibility.
The items will be
displayed as a row, with
equal space between each
item.
nav ul{
display: flex;
}

The flex property
• flex-grow - add space
• flex-shrink - remove space
• flex-basis - the initial size before any growing or shrinking

Flexbox
flex: 1 1 300px;
flex-grow: 1
flex-shrink: 1;
flex-basis: 300px;
The initial width of our li
is 300 pixels, however it
can grow larger and
shrink smaller than 300
pixels.
.wrapper {
display: flex;
}
.wrapper li {
flex: 1 1 300px;
min-width: 1px;
}

Flexbox
flex: 1 1 300px;
flex-grow: 1
flex-shrink: 1;
flex-basis: 300px;
If we allow the flex items
to wrap we can see how
flex-basis works by
dragging the window
smaller.
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.wrapper li {
flex: 1 1 300px;
min-width: 1px;
}

Flexbox
flex: 1 1 300px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
The 3rd item has
flex: 0 1 300px;
so cannot grow.
.wrapper {
display: flex;
}
.wrapper li {
flex: 1 1 300px;
min-width: 1px;
}
flex: 0 1 300px;
}

Flexbox
If we set the 3rd item to 
flex-grow: 2
This item will be assigned
twice of much of the
available free space after
we have reached the 300
pixel initial width.
.wrapper {
display: flex;
}
.wrapper li {
flex: 1 1 300px;
min-width: 1px;
}
flex: 2 1 300px;
}

http://madebymike.com.au/demos/flexbox-tester/

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

Flexbox for 1 dimensional layout.
CSS Grid is for 2 dimensional layout.

The value of the grid-
template-columns
property says:
repeat this track listing,
auto-filing as many
columns with a minimum
width of 300 pixels and a
maximum of 1fr.
.wrapper {
display: grid;
grid-template-columns: repeat(auto-
fill, minmax(300px, 1fr));
}

Using the minmax()
function with grid-auto-
rows.
.home-hero {
display: grid;
grid-gap: 1px;
grid-auto-rows: minmax(150px, auto);
}

An item on the grid can
become a grid or flex
container itself.
In this case I am using
flexbox and auto margins
to push my content to the
bottom of the box.
.special {
display: flex;
flex-direction: column;
}
.special h3{
margin-top: auto;
}

http://codepen.io/collection/XJRERz/

http://caniuse.com/#feat=flexbox

http://caniuse.com/#feat=css-grid
Shipped yesterday!

• Grid shipped in Firefox yesterday
• Grid is scheduled for Chrome 57 - next week
• Grid is in the current Safari Beta - probably
shipping March/April.

http://gridbyexample.com/browsers

IE and Edge still use their early
implementation of CSS Grid Layout.

Feature Queries - your new best
friend

Feature Queries
Test for support of
property: value pairs.
@supports (display: grid) {
.has-grid {
/* CSS for grid browsers here */
}
}

This example sets three
elements to display: none
Using @supports I test to
see if they have support
and set display: block s
they will become visible.
.has-flex,
.has-grid,
.has-grid-shapes { display: none; }
@supports (display: flex) {
.has-flex {
display: block;
background-color: #0084AD;
color: #fff;
}
}
@supports (display: grid) {
.has-grid {
display: block;
background-color: #284C6D;
color: #fff;
}
}
@supports ((display: grid) and (shape-outside: circle())) {
.has-grid-shapes {
display: block;
background-color: #666;
color: #fff;
}
}

http://codepen.io/rachelandrew/pen/RRkWKX

Using Feature Queries
• Write CSS for browsers without support
• Override those properties inside the feature queries
• https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
• https://developer.mozilla.org/en-US/docs/Web/CSS/
CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

Grid tips for Feature Queries
• Floated items that become grid or flex items lose their float
behaviour
• vertical-align has no effect on a grid item
• Items set to display: inline-block or block become grid items
• Your overrides mostly change widths, margins and padding.
• If grid tracks or flex-basis seem to be using a size you didn’t
expect, check your item widths!

http://codepen.io/rachelandrew/pen/WGNrPW

http://caniuse.com/#feat=css-featurequeries

Anything new in CSS you can use
feature queries to detect support.

Thank you
Slides & Resources:  
https://rachelandrew.co.uk/speaking/event/laracon-online
http://csslayout.news - sign up for my weekly CSS Layout email
—
@rachelandrew | me@rachelandrew.co.uk
—
https://rachelandrew.co.uk | https://grabaperch.com

CSS Layout Techniques with Grid and Flexbox

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to CSS Layout Techniques with Grid and Flexbox

Similar to CSS Layout Techniques with Grid and Flexbox (20)

More from Rachel Andrew

More from Rachel Andrew (14)

Recently uploaded

Recently uploaded (20)

CSS Layout Techniques with Grid and Flexbox