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()
.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 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
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.
.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
.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.
.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
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
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
.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
.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
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.
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
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
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
CSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenCSS Grid Layout - All Things Open
CSS Grid Layout - All Things Open
 
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

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfUK Journal
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimaginedpanagenda
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPTiSEO AI
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandIES VE
 

Recently uploaded (20)

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 

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()
  • 33.
  • 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
  • 36.
  • 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
  • 39.
  • 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.
  • 57.
  • 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
  • 62.
  • 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.
  • 64.
  • 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
  • 66.
  • 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
  • 69.
  • 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/
  • 72.
  • 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
  • 74.
  • 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
  • 76.
  • 77.
  • 78.
  • 81.
  • 82.
  • 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
  • 84.
  • 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
  • 90.
  • 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