SlideShare a Scribd company logo
1 of 96
Download to read offline
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?
1 dimensional layout as a row
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 flex-basis.
https://codepen.io/rachelandrew/pen/KvBLbJ
row wrapper as flex 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;
grid-template-columns:
repeat(auto-fill,minmax(200px, 1fr));
}
repeat()
.grid-wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns:
repeat(auto-fill,minmax(200px, 1fr));
}
auto-fill
.grid-wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns:
repeat(auto-fill,minmax(200px, 1fr));
}
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
1fr1fr2fr
.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
400px1fr1fr
.wrapper {
display: grid;
grid-template-columns:
repeat(12, minmax(0,1fr));
grid-gap: 20px;
}
The fr unit
Creating a 12 column flexible 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.
.grid-wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns:
repeat(auto-fill,minmax(200px, 1fr));
}
minmax()
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
Solving Layout Problems with CSS Grid & Friends - DevFest17
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 figure 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
Solving Layout Problems with CSS Grid & Friends - DevFest17
New sizing keywords from the CSS
Sizing specification
CSS Intrinsic & Extrinsic Sizing Module Level 3: https://www.w3.org/TR/css-sizing-3/
▸ min-content
▸ max-content
▸ fit-content
.wrapper {
display: grid;
grid-template-columns: min-content 1fr 1fr;
grid-gap: 20px;
}
min-content
Roughly, the inline size that would fit
around its contents if all soft wrap
opportunities within the box were
taken.
https://codepen.io/rachelandrew/pen/xLejpK
1fr1frmin-content
.wrapper {
display: grid;
grid-template-columns: max-content 1fr 1fr;
grid-gap: 20px;
}
max-content
Usually the narrowest inline size it could
take while fitting around its contents
if none of the soft wrap opportunities
within the box were taken.
https://codepen.io/rachelandrew/pen/KvYRZB
1fr1frmax-content
.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
finite, equal to min(max-content size,
max(min-content size,stretch-fit size)).
Otherwise, equal to the max-content
size in that axis.
https://codepen.io/rachelandrew/pen/NvLvRG
1fr
fit-content(200px)
fit-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
float 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;
grid-template-columns: repeat(3, auto);
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;
grid-template-columns: repeat(3, auto);
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;
grid-template-columns: repeat(3, auto);
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;
grid-template-columns: repeat(3, auto);
}
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;
grid-template-columns: repeat(3, auto);
}
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 floated item
the right size to fit into our layout will be
interpreted on the grid item as a
percentage of the grid track.
Solving Layout Problems with CSS Grid & Friends - DevFest17
.grid > div {
float: left;
width: 33.333%;
}
@supports (display: grid) {
.grid > div {
width: auto;
}
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
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
You need to understand CSS
The fundamentals of CSS haven’t
changed
Subgrids?
Next for Grid
Solving Layout Problems with CSS Grid & Friends - DevFest17
.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 on the
parent element with fr units.
Solving Layout Problems with CSS Grid & Friends - DevFest17
.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
Solving Layout Problems with CSS Grid & Friends - DevFest17
1
2
3
4
5
.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
Solving Layout Problems with CSS Grid & Friends - DevFest17
Subgrid Links & Thoughts
▸ https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the-
css-grid-specification/
▸ 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/
Masonry
Layout
Next for Grid
Solving Layout Problems with CSS Grid & Friends - DevFest17
.grid {
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(auto-fill,
minmax(160px, 1fr));
grid-auto-rows: minmax(100px, auto);
}
.grid > div:nth-child(1) {
grid-row-end: span 2;
}
.grid > div:nth-child(2) {
grid-row-end: span 3;
}
.grid > div:nth-child(4) {
grid-row-end: span 3;
}
.grid > div:nth-child(5) {
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
Solving Layout Problems with CSS Grid & Friends - DevFest17
.grid {
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(auto-
fill, minmax(160px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: dense;
}
Set auto-flow to dense
Grid will backfill gaps taking items out of
document order visually.
https://codepen.io/rachelandrew/pen/WEWqWR
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
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
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
.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
Solving Layout Problems with CSS Grid & Friends - DevFest17
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.
https://codepen.io/rachelandrew/pen/qjdzwR
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.
https://codepen.io/rachelandrew/pen/qjdzwR
Solving Layout Problems with CSS Grid & Friends - DevFest17
This is all new.
We are all learning.
Solve problems and 

share what you find 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 fixed 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

More Related Content

What's hot

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutRachel Andrew
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS LayoutRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Rachel Andrew
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & FriendsRachel Andrew
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridRachel Andrew
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersRachel Andrew
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatRachel Andrew
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Rachel Andrew
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS LayoutRachel Andrew
 
New CSS Meets the Real World
New CSS Meets the Real WorldNew CSS Meets the Real World
New CSS Meets the Real WorldRachel Andrew
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS LayoutRachel Andrew
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid LayoutRachel Andrew
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutRachel Andrew
 
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?Rachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxRachel Andrew
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutRachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRachel Andrew
 

What's hot (20)

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid Layout
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS Layout
 
New CSS Meets the Real World
New CSS Meets the Real WorldNew CSS Meets the Real World
New CSS Meets the Real World
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS Layout
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
 
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
 

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

Solving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and FriendsSolving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and FriendsFITC
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFRachel Andrew
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Rachel Andrew
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Rachel Andrew
 
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutRachel Andrew
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureRachel Andrew
 
Laying out the future
Laying out the futureLaying out the future
Laying out the futureRachel Andrew
 
CSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenCSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenRachel Andrew
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutRachel Andrew
 
CSS Grid layout - De volta para o futuro
CSS Grid layout - De volta para o futuroCSS Grid layout - De volta para o futuro
CSS Grid layout - De volta para o futuroAfonso Pacifer
 
CSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NERachel Andrew
 
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutRachel Andrew
 
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzRachel Andrew
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid LayoutRachel Andrew
 

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

Solving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and FriendsSolving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and Friends
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!
 
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the future
 
World of CSS Grid
World of CSS GridWorld of CSS Grid
World of CSS Grid
 
Laying out the future
Laying out the futureLaying out the future
Laying out the future
 
CSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenCSS Grid Layout - All Things Open
CSS Grid Layout - All Things Open
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
 
CSS Grid layout - De volta para o futuro
CSS Grid layout - De volta para o futuroCSS Grid layout - De volta para o futuro
CSS Grid layout - De volta para o futuro
 
CSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NE
 
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
 

More from Rachel Andrew

Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp KeynoteRachel Andrew
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldRachel Andrew
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldRachel Andrew
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersRachel Andrew
 
Where does CSS come from?
Where does CSS come from?Where does CSS come from?
Where does CSS come from?Rachel Andrew
 
An Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldAn Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldRachel Andrew
 

More from Rachel Andrew (7)

Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real World
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
 
Where does CSS come from?
Where does CSS come from?Where does CSS come from?
Where does CSS come from?
 
CSS Grid for html5j
CSS Grid for html5jCSS Grid for html5j
CSS Grid for html5j
 
An Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldAn Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real World
 

Recently uploaded

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Recently uploaded (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

Solving Layout Problems with CSS Grid & Friends - DevFest17

  • 1. Solving Layout problems 
 with CSS Grid & friends Rachel Andrew @ #DevFest17
  • 2. 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
  • 3. … why not use Flexbox? So, about this Grid thing …
  • 4. Do you need layout in 
 one dimension or two?
  • 6. 2 dimensional - layout as a row Layout 
 as a 
 column
  • 7. Grid works from the container in
  • 8. Every other method of creating a grid, involves sizing the individual items.
  • 9. .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
  • 10. row wrapper (6.20%*4) + (2.093333%*3)
  • 11. There is no grid. We made it look like there is a grid by the fact things line up.
  • 12. .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 flex-basis. https://codepen.io/rachelandrew/pen/KvBLbJ
  • 13. row wrapper as flex container (6.20%*4) + (2.093333%*3)
  • 14. .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
  • 15. Grid container grid-column: 2 / span 4; 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
  • 16. Grid frameworks create something that looks like a grid by controlling item size.
  • 17. CSS Grid Layout creates an actual grid and you place items into it.
  • 18. CSS Grid Layout is a native CSS framework. Built into the browser.
  • 21. .grid-wrapper { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } repeat()
  • 22. .grid-wrapper { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } auto-fill
  • 23. .grid-wrapper { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } minmax()
  • 24. The fr unit - distributing available space
  • 25. .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
  • 27. .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
  • 29. .wrapper { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-gap: 20px; } The fr unit Creating a 12 column flexible grid with no percentage calculations. https://codepen.io/rachelandrew/pen/VzBOJW
  • 30. grid-template-columns: repeat(12,minmax(0,1fr)); 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
  • 31. The fr unit replaces percentages in most cases when using grid layout.
  • 32. .grid-wrapper { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } minmax()
  • 34. .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
  • 35. minmax(200px, auto) minmax(200px, auto) minmax(200px, auto) minmax(200px, auto) 200px
  • 38. 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 figure 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
  • 40. New sizing keywords from the CSS Sizing specification
  • 41. CSS Intrinsic & Extrinsic Sizing Module Level 3: https://www.w3.org/TR/css-sizing-3/ ▸ min-content ▸ max-content ▸ fit-content
  • 42. .wrapper { display: grid; grid-template-columns: min-content 1fr 1fr; grid-gap: 20px; } min-content Roughly, the inline size that would fit around its contents if all soft wrap opportunities within the box were taken. https://codepen.io/rachelandrew/pen/xLejpK
  • 44. .wrapper { display: grid; grid-template-columns: max-content 1fr 1fr; grid-gap: 20px; } max-content Usually the narrowest inline size it could take while fitting around its contents if none of the soft wrap opportunities within the box were taken. https://codepen.io/rachelandrew/pen/KvYRZB
  • 46. .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 finite, equal to min(max-content size, max(min-content size,stretch-fit size)). Otherwise, equal to the max-content size in that axis. https://codepen.io/rachelandrew/pen/NvLvRG
  • 48. CSS is here to help Dealing with old browsers
  • 49. .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 float an item for old browsers then try it into a grid item for new ones. https://codepen.io/rachelandrew/pen/NvmMOM
  • 50. .grid > div { display: inline-block; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); 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
  • 51. .grid > div { display: table-cell; vertical-align: top; } .grid { border-spacing: 10px; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); 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
  • 52. .grid > div { display: inline-block; vertical-align: top; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); 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
  • 53. .grid { column-count: 3; width: 500px; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); } 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
  • 54. .grid { display: flex; align-items: center; width: 500px; height: 200px; border: 1px dotted #694486; } .grid > div { flex: 1; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); } 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
  • 55. Use the cascade. Write code for old browsers then code for new browsers.
  • 56. .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 floated item the right size to fit into our layout will be interpreted on the grid item as a percentage of the grid track.
  • 58. .grid > div { float: left; width: 33.333%; } @supports (display: grid) { .grid > div { width: auto; } } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); 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
  • 59. You need to understand CSS
  • 60. The fundamentals of CSS haven’t changed
  • 63. .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 on the parent element with fr units.
  • 65. .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
  • 68. .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
  • 70. Subgrid Links & Thoughts ▸ https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the- css-grid-specification/ ▸ 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/
  • 73. .grid { display: grid; grid-gap: 40px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: minmax(100px, auto); } .grid > div:nth-child(1) { grid-row-end: span 2; } .grid > div:nth-child(2) { grid-row-end: span 3; } .grid > div:nth-child(4) { grid-row-end: span 3; } .grid > div:nth-child(5) { 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
  • 75. .grid { display: grid; grid-gap: 40px; grid-template-columns: repeat(auto- fill, minmax(160px, 1fr)); grid-auto-rows: minmax(100px, auto); grid-auto-flow: dense; } Set auto-flow to dense Grid will backfill gaps taking items out of document order visually. https://codepen.io/rachelandrew/pen/WEWqWR
  • 83. .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
  • 86. .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. https://codepen.io/rachelandrew/pen/qjdzwR
  • 87. 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
  • 89. .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. https://codepen.io/rachelandrew/pen/qjdzwR
  • 91. This is all new.
  • 92. We are all learning.
  • 93. Solve problems and 
 share what you find out.
  • 94. 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 fixed interop issues:
 https://github.com/rachelandrew/gridbugs
  • 95. The New 
 CSS Layout Out now!
  • 96. Thank you! @rachelandrew
 Slides & Resources: https://rachelandrew.co.uk/speaking/event/gdg-london-2017