SlideShare a Scribd company logo
LAYING OUT THE FUTURE WITH GRID &
FLEXBOX
@rachelandrew @ Smashing Conf Freiburg
Rachel Andrew
▸ CSS Working Group Invited Expert
▸ Google Developer Expert
▸ co-founder Perch CMS
▸ Old Nerd.
▸ You can find me in most places as @rachelandrew you can email
me@rachelandrew.co.uk or check out my site at https://rachelandrew.co.uk
March 2017 March 2017 March 2017 March 2017 March 2017 17 Oct 2017
Laying out the future with grid and flexbox
▸ What is grid & why is it different to flexbox?
▸ How do I get started using grid in production?
▸ What about old browsers?
▸ How can we help encourage browsers to give us cool new stuff?
Why not use
flexbox?
CSS Grid Layout
Flexbox is for one-dimensional layout
Grid is for two-dimensional layout
.grid {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-
fill, minmax(200px, 1fr));
}
Grid minmax() and auto-fill
Creating a flexible number of flexible
tracks, with a little bit of grid spec
magic.
http://codepen.io/rachelandrew/pen/evjdLM
If you are adding widths to all your
flex items, you probably need grid.
.example {
display: flex;
justify-content: space-between;
margin: 30px;
}
Flexbox
Using space-between
https://codepen.io/rachelandrew/pen/rzXXJY
.example {
display: flex;
flex-wrap: wrap;
margin: 30px;
}
.example > div {
flex: 1 1 auto;
}
Flexbox
Allowing items to grow and shrink
from a flex-basis of auto.
https://codepen.io/rachelandrew/pen/MvNNaj
Grid works from the container in
.example {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr 1fr;
margin: 20px;
}
Grid
Define column tracks. Items are
constrained by those tracks.
https://codepen.io/rachelandrew/pen/prMMLe
.example {
display: grid;
grid-gap: 20px;
grid-template-columns: 2fr 1fr 2fr 1fr;
margin: 20px;
}
Grid
To make some tracks larger than
others, we do that when defining the
tracks on the container not on the
item itself.
https://codepen.io/rachelandrew/pen/LjwwgM
Other layout methods start with 

the item.
.box {
float: left;
width: 33.3333%;
}
A float grid
The float property and widths are
added to the items.
.box {
display: inline-block;
width: 33.3333%;
}
inline-block grid
The display property is set to inline-
block and width is added to the item.
.container {

display: flex;

}

.box {
flex: 0 0 33.3333%;
}
Flex grid
We add display: flex to the container
however to make a grid out of flex
items we need to use the flex
properties in the items.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Grid Layout
With CSS Grid Layout we create the
grid on the parent element. We don’t
need to add properties to the items.
Grid is all about the container
https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
.Prose {
display: grid;
grid-template-columns:
[full-start] minmax(1em, 1fr)
[main-start] minmax(0, 40em) [main-end]
minmax(1em, 1fr) [full-end];
}
.Prose > * {
grid-column: main;
}
.Prose-splash {
grid-column: full;
}
Just do this!
Magic occurs.
<div class="grid">
<div>Content</div>
<div class="full">Full width</div>
<div>Content</div>
</div>
My markup
A div containing three direct child
elements, one with a class of ‘full’.
.grid {
display: grid;
grid-gap: 20px;
grid-template-columns:
minmax(1em, 1fr)
minmax(0, 40em)
minmax(1em, 1fr);
}
.grid > * {
grid-column: 2 ;
}
.grid > .full {
grid-column: 1 / 4 ;
}
A grid with 3 column tracks
Using the line numbers to place our
content and full width items.
1 2 3 4
1 2 3 4
grid-column: 2;
grid-column: 1 / 4;
grid-column: 2;
.grid {
display: grid;
grid-gap: 20px;
grid-template-columns:
[full-start] minmax(1em, 1fr)
[main-start] minmax(0, 40em) [main-end]
minmax(1em, 1fr) [full-end];
}
.grid > * {
grid-column: main-start ;
}
.grid > .full {
grid-column: full-start / full-end;
}
Naming lines on the grid
We can now position the items using
their line names.
full-start main-start main-end full-end
grid-column: main-start;
grid-column: full-start / full-end;
full-start main-start main-end full-end
grid-column: main-start;
grid-column: main;
grid-column: full;
full-start main-start main-end full-end
grid-column: main;
.grid {
display: grid;
grid-gap: 20px;
grid-template-columns:
[full-start] minmax(1em, 1fr)
[main-start] minmax(0, 40em) [main-end]
minmax(1em, 1fr) [full-end];
}
.grid > * {
grid-column: main;
}
.grid > .full {
grid-column: full;
}
‘main’and‘full’
These line names don’t exist
anywhere in our grid definition.
https://www.w3.org/TR/css-grid-1/#implicit-named-areas
“Since a named grid area is referenced by the
implicit named lines it produces, explicitly adding
named lines of the same form (foo-start/foo-end)
effectively creates a named grid area. ”
main-start
main-start
main-end
main-end
main
.grid {
display: grid;
grid-gap: 20px;
grid-template-columns:
100px [main-start]
100px 100px 100px [main-end]
100px 100px;
grid-template-rows:
100px [main-start]
100px 100px [main-end] 100px;
}
.item {
grid-area: main;
}
Implicit named areas
Created by having named lines using
an ident with *-start and *-end.



https://codepen.io/rachelandrew/pen/
eWoKmd/
https://www.w3.org/TR/css-grid-1/#line-placement
“Note: Named grid areas automatically generate
implicit named lines of this form, so specifying
grid-row-start: foo will choose the start edge of
that named grid area (unless another line named
foo-start was explicitly specified before it).”
https://www.w3.org/TR/css-grid-1/#placement-shorthands
“[when using grid-row and grid-column
shorthands] … When the second value is omitted,
if the first value is a <custom-ident>, the grid-row-
end/grid-column-end longhand is also set to
that <custom-ident>; otherwise, it is set to auto.”
grid-column: main;
grid-column: full;
full-start main-start main-end full-end
grid-column: main;
grid-column: main / main;
grid-column: full / full;
full-start main-start main-end full-end
grid-column: main / main;
full fullmain main
https://codepen.io/rachelandrew/pen/xdedMy/
Grid gives us powerful tools to control
layout via the containing element.
Using grid in
production
CSS Grid Layout
<div class="box-feature">
<img class="box-image" src="http://placehold.it/
900x450" alt="placeholder">
<h2 class="box-feature-title">Featured Item</h2>
<div class="box-content">…</div>
</div>
Feature box
The feature has an image with a
heading and body text overlaid.
.box-feature {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(6, 1fr);
}
Feature box
display: grid turns on grid layout
grid-gap defines gutters between
grid items
grid-template-columns creates
column tracks. In this case creating a
grid with 6 columns.
The fr unit defines a fraction of the
available space in the grid container
.box-feature .box-image {
align-self: stretch;
justify-self: stretch;
grid-column: 1 / -1;
grid-row: 1 / 4;
}
Feature box
The image starts at grid column 

line 1 and ends at -1, which is the end
line.
It starts at grid row 1, ending at grid
row 4.
Using box alignment properties to
stretch the image over that area.
Grid lines respect writing mode.
Column line 1 is on the left and -1 on
the right in a LTR language.
Explicit vs. Implicit Grid
▸ The Explicit Grid is created when you define tracks with grid-template-
columns and grid-template-rows
▸ If you place an item outside of that grid, or auto-placed content requires
further row or column tracks these are added by grid as the Implicit Grid.
.box-feature .box-feature-title {
grid-column: 3 / -1;
grid-row: 1;
background-color: rgba(0,0,0,0.7);
color: #fff;
align-self: start;
padding: 20px;
}
.box-feature .box-content {
grid-column: 2 / -1;
grid-row: 2;
background-color: rgba(0,0,0,0.7);
color: #fff;
padding: 20px;
}
Feature box
Positioning the content inside the
area that the image is stretched over.
http://codepen.io/rachelandrew/pen/evQjMx
Layering items on the grid
▸ You can position items into the same grid cells
▸ Items further down in the source appear on top of earlier items
▸ Control the stack using z-index
.listing {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 20px;
}
The listing
The container for our boxes has 12
equal columns.
.box-title {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
.box-feature {
grid-column: 4 / -1;
grid-row: 1 / 2;
}
The listing
Positioning the title top left and the
feature top right
.box-newer {
grid-column: auto / span 4;
}
.box-newer.box-media {
grid-row-end: span 2;
}
Larger boxes
Newer items span 4 column tracks. If
they also have a class of box-media
they span 2 row tracks.
.box-older {
grid-column: auto / span 3;
}
Smaller boxes
The boxes for older items span 3
tracks.
http://codepen.io/rachelandrew/pen/Opaopw
Going
responsive
CSS Grid
.box-title {
grid-column: 1 / -1;
grid-row: 1;
}
@media all and (min-width: 53.125em) {
.box-title {
grid-column: 1 / 6;
grid-row: 1 / 3;
}
}
@media all and (min-width: 75em) {
.box-title {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
}
Going responsive
Inside media queries we can redefine
where items sit on the grid.
.box-newer {
grid-column: 1 / -1;
}
@media all and (min-width: 28.125em) {
.box-newer {
grid-column: auto / span 6;
}
}
@media all and (min-width: 53.125em) {
.box-newer {
grid-column: auto / span 4;
}
}
Going responsive
Or redefine how many columns they
span.
http://codepen.io/rachelandrew/pen/gmQdgz
What about
old browsers?
CSS Grid Layout
What about old browsers?
If using display: grid on a container, child items:
‣ Using float, lose their float behaviour
‣ The vertical-align property has no effect
‣ Flex items become grid items
‣ Items set to display: block or inline-block become grid
items
‣ Items set to display: table-cell stop creating anonymous
boxes
You do not need to build “two
layouts”
.listing {
display: flex;
flex-wrap: wrap;
margin: 0 20px;
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 20px;
}
.listing > * {
flex: 1 1 30%;
margin: 0 20px 20px 20px;
}
Adding a flex fallback
Browsers that support display: flex
and not grid will turn the children into
flex, not grid, items.
The flex properties applied to those
items will be ignored by grid layout.
Feature Queries are your new best
friend
.listing > * {
flex: 1 1 30%;
margin: 0 20px 20px 20px;
}
@supports(display: grid) {
.listing > * {
margin: 0;
}
}
Using feature queries
Add a margin for flex layout, remove it
if we are using grid layout.
.listing .box-feature {
flex: 1 1 60%;
}
Flex layout
Give the feature box a larger flex-
basis percentage.
http://codepen.io/rachelandrew/pen/jBQpXv
.grid > div {
float: left;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, auto);
width: 500px;
}
Float and Clear
The float and clear properties have
no effect on a grid item.



https://codepen.io/rachelandrew/pen/YZeqZv
.grid > div {
display: inline-block;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, auto);
width: 500px;
}
display: inline-block
The properties associated with
something being inline-block cease
to apply.



https://codepen.io/rachelandrew/pen/vxdGjQ
.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 boxes will not be
generated and the item will become a
grid item.



https://codepen.io/rachelandrew/pen/bqLpQN
.grid > div {
display: inline-block;
vertical-align: top;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, auto);
width: 500px;
}
The vertical-align property
Can be used as a fallback for box
alignment and ceases to apply on grid
items.



https://codepen.io/rachelandrew/pen/vxdGaQ
.grid {
column-count: 3;
width: 500px;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, auto);
}
Multiple-column layout
Multiple-column layout properties
cease to apply in grid layout.



https://codepen.io/rachelandrew/pen/JWpXxv
.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
Grid will override flex layout and
shares box alignment properties.



https://codepen.io/rachelandrew/pen/YZeqMB
Overrides inside @supports are
mostly widths & margins
* { box-sizing: border-box; }
.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;
}
Override widths in feature queries
Watch out for widths in your fallback
layouts.



https://codepen.io/rachelandrew/pen/JWpXNr
https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
Edge Grid implementation
▸ Updated implementation in Windows Insider build - will ship in October
▸ Currently tied to the IE10 implementation
▸ Prefixed with -ms
▸ No auto-placement or grid-template-areas layout
▸ For simple line-based positioning it works
▸ More at https://rachelandrew.co.uk/archives/2017/04/04/edge-starts-work-
on-their-grid-implementation-update/
Autoprefixer can add -ms-grid
prefixes. This is rarely helpful.
March 2017 March 2017 March 2017 March 2017 March 2017 17 Oct 2017
Let browser vendors know which
features you want.
https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/
https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/
http://codepen.io/rachelandrew/pen/YqpRdq/
.exclusion {
-ms-wrap-flow: both;
wrap-flow: both;
}
Exclusions
Defines the wrap-flow property,
which enables wrapping content
round all sides of an element.
https://www.chromestatus.com/features/6296903092273152
You can get involved in the future of
CSS.
https://github.com/w3c/csswg-drafts/issues
https://github.com/w3c/csswg-drafts/issues/499
Get involved with CSS
▸ Comment on or raise new issues against CSS specifications
▸ Raise bugs against browsers
▸ Vote on features where browsers have a platform to do so
▸ Write about new features - it demonstrates we want them
▸ Be nice while doing it. Browser engineers and spec editors work within
constraints just as you do in your projects.
is here!
CSS Grid
Find out more
I made you some resources
Visit Grid by Example for worked examples, and a free video
tutorial:

http://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
October 10th 2017
THANK YOU!
@rachelandrew



https://rachelandrew.co.uk/speaking/event/smashingconf-freiburg-2017

More Related Content

What's hot

Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
Rachel Andrew
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
Rachel 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
 
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
Rachel Andrew
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
Rachel Andrew
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
Rachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
Rachel Andrew
 
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
Rachel Andrew
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
Rachel Andrew
 
New CSS Meets the Real World
New CSS Meets the Real WorldNew CSS Meets the Real World
New CSS Meets the Real World
Rachel 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 Today
Rachel 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 that
Rachel Andrew
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
Rachel Andrew
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
Rachel Andrew
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
Rachel 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 Layout
Rachel Andrew
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS Layout
Rachel Andrew
 
CSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenCSS Grid Layout - All Things Open
CSS Grid Layout - All Things Open
Rachel Andrew
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 

What's hot (20)

Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
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!
 
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
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 
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
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
 
New CSS Meets the Real World
New CSS Meets the Real WorldNew CSS Meets the Real World
New CSS Meets the Real World
 
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
 
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
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and 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
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
 
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
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS Layout
 
CSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenCSS Grid Layout - All Things Open
CSS Grid Layout - All Things Open
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 

Similar to Laying out the future with grid & flexbox - Smashing Conf Freiburg

Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
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
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the future
Rachel Andrew
 
Laying out the future
Laying out the futureLaying out the future
Laying out the future
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 Layout
Rachel Andrew
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Rachel 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 Layout
Rachel Andrew
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
All Things Open
 
CSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NE
Rachel Andrew
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart OrlandoCSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart Orlando
Rachel Andrew
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016
Rachel Andrew
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
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 Layout
Rachel Andrew
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
Rachel Andrew
 
The Grid - The Future of CSS Layout
The Grid - The Future of CSS LayoutThe Grid - The Future of CSS Layout
The Grid - The Future of CSS Layout
Ronny Siikaluoma
 
The Right Layout Tool for the Job
The Right Layout Tool for the JobThe Right Layout Tool for the Job
The Right Layout Tool for the Job
Rachel Andrew
 
Future Layout & Performance
Future Layout & PerformanceFuture Layout & Performance
Future Layout & Performance
Rachel Andrew
 

Similar to Laying out the future with grid & flexbox - Smashing Conf Freiburg (20)

Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
 
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!
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the future
 
Laying out the future
Laying out the futureLaying out the future
Laying out the future
 
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
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: 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
 
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 Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NE
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart OrlandoCSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart Orlando
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
 
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
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
The Grid - The Future of CSS Layout
The Grid - The Future of CSS LayoutThe Grid - The Future of CSS Layout
The Grid - The Future of CSS Layout
 
The Right Layout Tool for the Job
The Right Layout Tool for the JobThe Right Layout Tool for the Job
The Right Layout Tool for the Job
 
Future Layout & Performance
Future Layout & PerformanceFuture Layout & Performance
Future Layout & Performance
 

More from Rachel 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 & Friends
Rachel 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
 
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
Rachel 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 World
Rachel Andrew
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
Rachel Andrew
 
Where does CSS come from?
Where does CSS come from?Where does CSS come from?
Where does CSS come from?
Rachel Andrew
 
CSS Grid for html5j
CSS Grid for html5jCSS Grid for html5j
CSS Grid for html5j
Rachel Andrew
 

More from Rachel Andrew (7)

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

Recently uploaded

Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
saastr
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
GDSC PJATK
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 

Recently uploaded (20)

Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 

Laying out the future with grid & flexbox - Smashing Conf Freiburg

  • 1. LAYING OUT THE FUTURE WITH GRID & FLEXBOX @rachelandrew @ Smashing Conf Freiburg
  • 2. Rachel Andrew ▸ CSS Working Group Invited Expert ▸ Google Developer Expert ▸ co-founder Perch CMS ▸ Old Nerd. ▸ You can find me in most places as @rachelandrew you can email me@rachelandrew.co.uk or check out my site at https://rachelandrew.co.uk
  • 3. March 2017 March 2017 March 2017 March 2017 March 2017 17 Oct 2017
  • 4. Laying out the future with grid and flexbox ▸ What is grid & why is it different to flexbox? ▸ How do I get started using grid in production? ▸ What about old browsers? ▸ How can we help encourage browsers to give us cool new stuff?
  • 6. Flexbox is for one-dimensional layout
  • 7.
  • 8. Grid is for two-dimensional layout
  • 9.
  • 10. .grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto- fill, minmax(200px, 1fr)); } Grid minmax() and auto-fill Creating a flexible number of flexible tracks, with a little bit of grid spec magic. http://codepen.io/rachelandrew/pen/evjdLM
  • 11. If you are adding widths to all your flex items, you probably need grid.
  • 12. .example { display: flex; justify-content: space-between; margin: 30px; } Flexbox Using space-between https://codepen.io/rachelandrew/pen/rzXXJY
  • 13.
  • 14. .example { display: flex; flex-wrap: wrap; margin: 30px; } .example > div { flex: 1 1 auto; } Flexbox Allowing items to grow and shrink from a flex-basis of auto. https://codepen.io/rachelandrew/pen/MvNNaj
  • 15.
  • 16. Grid works from the container in
  • 17. .example { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 20px; } Grid Define column tracks. Items are constrained by those tracks. https://codepen.io/rachelandrew/pen/prMMLe
  • 18.
  • 19. .example { display: grid; grid-gap: 20px; grid-template-columns: 2fr 1fr 2fr 1fr; margin: 20px; } Grid To make some tracks larger than others, we do that when defining the tracks on the container not on the item itself. https://codepen.io/rachelandrew/pen/LjwwgM
  • 20.
  • 21. Other layout methods start with 
 the item.
  • 22. .box { float: left; width: 33.3333%; } A float grid The float property and widths are added to the items.
  • 23. .box { display: inline-block; width: 33.3333%; } inline-block grid The display property is set to inline- block and width is added to the item.
  • 24. .container {
 display: flex;
 }
 .box { flex: 0 0 33.3333%; } Flex grid We add display: flex to the container however to make a grid out of flex items we need to use the flex properties in the items.
  • 25. .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } Grid Layout With CSS Grid Layout we create the grid on the parent element. We don’t need to add properties to the items.
  • 26. Grid is all about the container
  • 28. .Prose { display: grid; grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end]; } .Prose > * { grid-column: main; } .Prose-splash { grid-column: full; } Just do this! Magic occurs.
  • 29. <div class="grid"> <div>Content</div> <div class="full">Full width</div> <div>Content</div> </div> My markup A div containing three direct child elements, one with a class of ‘full’.
  • 30. .grid { display: grid; grid-gap: 20px; grid-template-columns: minmax(1em, 1fr) minmax(0, 40em) minmax(1em, 1fr); } .grid > * { grid-column: 2 ; } .grid > .full { grid-column: 1 / 4 ; } A grid with 3 column tracks Using the line numbers to place our content and full width items.
  • 31. 1 2 3 4
  • 32. 1 2 3 4 grid-column: 2; grid-column: 1 / 4; grid-column: 2;
  • 33. .grid { display: grid; grid-gap: 20px; grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end]; } .grid > * { grid-column: main-start ; } .grid > .full { grid-column: full-start / full-end; } Naming lines on the grid We can now position the items using their line names.
  • 35. grid-column: main-start; grid-column: full-start / full-end; full-start main-start main-end full-end grid-column: main-start;
  • 36. grid-column: main; grid-column: full; full-start main-start main-end full-end grid-column: main;
  • 37. .grid { display: grid; grid-gap: 20px; grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end]; } .grid > * { grid-column: main; } .grid > .full { grid-column: full; } ‘main’and‘full’ These line names don’t exist anywhere in our grid definition.
  • 38. https://www.w3.org/TR/css-grid-1/#implicit-named-areas “Since a named grid area is referenced by the implicit named lines it produces, explicitly adding named lines of the same form (foo-start/foo-end) effectively creates a named grid area. ”
  • 40. .grid { display: grid; grid-gap: 20px; grid-template-columns: 100px [main-start] 100px 100px 100px [main-end] 100px 100px; grid-template-rows: 100px [main-start] 100px 100px [main-end] 100px; } .item { grid-area: main; } Implicit named areas Created by having named lines using an ident with *-start and *-end.
 
 https://codepen.io/rachelandrew/pen/ eWoKmd/
  • 41. https://www.w3.org/TR/css-grid-1/#line-placement “Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-row-start: foo will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).”
  • 42. https://www.w3.org/TR/css-grid-1/#placement-shorthands “[when using grid-row and grid-column shorthands] … When the second value is omitted, if the first value is a <custom-ident>, the grid-row- end/grid-column-end longhand is also set to that <custom-ident>; otherwise, it is set to auto.”
  • 43. grid-column: main; grid-column: full; full-start main-start main-end full-end grid-column: main;
  • 44. grid-column: main / main; grid-column: full / full; full-start main-start main-end full-end grid-column: main / main; full fullmain main
  • 46. Grid gives us powerful tools to control layout via the containing element.
  • 48.
  • 49.
  • 50.
  • 51. <div class="box-feature"> <img class="box-image" src="http://placehold.it/ 900x450" alt="placeholder"> <h2 class="box-feature-title">Featured Item</h2> <div class="box-content">…</div> </div> Feature box The feature has an image with a heading and body text overlaid.
  • 52. .box-feature { display: grid; grid-gap: 20px; grid-template-columns: repeat(6, 1fr); } Feature box display: grid turns on grid layout grid-gap defines gutters between grid items grid-template-columns creates column tracks. In this case creating a grid with 6 columns.
  • 53. The fr unit defines a fraction of the available space in the grid container
  • 54.
  • 55. .box-feature .box-image { align-self: stretch; justify-self: stretch; grid-column: 1 / -1; grid-row: 1 / 4; } Feature box The image starts at grid column 
 line 1 and ends at -1, which is the end line. It starts at grid row 1, ending at grid row 4. Using box alignment properties to stretch the image over that area.
  • 56. Grid lines respect writing mode. Column line 1 is on the left and -1 on the right in a LTR language.
  • 57. Explicit vs. Implicit Grid ▸ The Explicit Grid is created when you define tracks with grid-template- columns and grid-template-rows ▸ If you place an item outside of that grid, or auto-placed content requires further row or column tracks these are added by grid as the Implicit Grid.
  • 58.
  • 59. .box-feature .box-feature-title { grid-column: 3 / -1; grid-row: 1; background-color: rgba(0,0,0,0.7); color: #fff; align-self: start; padding: 20px; } .box-feature .box-content { grid-column: 2 / -1; grid-row: 2; background-color: rgba(0,0,0,0.7); color: #fff; padding: 20px; } Feature box Positioning the content inside the area that the image is stretched over.
  • 61. Layering items on the grid ▸ You can position items into the same grid cells ▸ Items further down in the source appear on top of earlier items ▸ Control the stack using z-index
  • 62.
  • 63.
  • 64. .listing { display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 20px; } The listing The container for our boxes has 12 equal columns.
  • 65.
  • 66.
  • 67. .box-title { grid-column: 1 / 4; grid-row: 1 / 2; } .box-feature { grid-column: 4 / -1; grid-row: 1 / 2; } The listing Positioning the title top left and the feature top right
  • 68.
  • 69. .box-newer { grid-column: auto / span 4; } .box-newer.box-media { grid-row-end: span 2; } Larger boxes Newer items span 4 column tracks. If they also have a class of box-media they span 2 row tracks.
  • 70. .box-older { grid-column: auto / span 3; } Smaller boxes The boxes for older items span 3 tracks.
  • 73. .box-title { grid-column: 1 / -1; grid-row: 1; } @media all and (min-width: 53.125em) { .box-title { grid-column: 1 / 6; grid-row: 1 / 3; } } @media all and (min-width: 75em) { .box-title { grid-column: 1 / 4; grid-row: 1 / 2; } } Going responsive Inside media queries we can redefine where items sit on the grid.
  • 74. .box-newer { grid-column: 1 / -1; } @media all and (min-width: 28.125em) { .box-newer { grid-column: auto / span 6; } } @media all and (min-width: 53.125em) { .box-newer { grid-column: auto / span 4; } } Going responsive Or redefine how many columns they span.
  • 77. What about old browsers? If using display: grid on a container, child items: ‣ Using float, lose their float behaviour ‣ The vertical-align property has no effect ‣ Flex items become grid items ‣ Items set to display: block or inline-block become grid items ‣ Items set to display: table-cell stop creating anonymous boxes
  • 78. You do not need to build “two layouts”
  • 79.
  • 80. .listing { display: flex; flex-wrap: wrap; margin: 0 20px; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 20px; } .listing > * { flex: 1 1 30%; margin: 0 20px 20px 20px; } Adding a flex fallback Browsers that support display: flex and not grid will turn the children into flex, not grid, items. The flex properties applied to those items will be ignored by grid layout.
  • 81. Feature Queries are your new best friend
  • 82.
  • 83. .listing > * { flex: 1 1 30%; margin: 0 20px 20px 20px; } @supports(display: grid) { .listing > * { margin: 0; } } Using feature queries Add a margin for flex layout, remove it if we are using grid layout.
  • 84.
  • 85. .listing .box-feature { flex: 1 1 60%; } Flex layout Give the feature box a larger flex- basis percentage.
  • 87. .grid > div { float: left; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } Float and Clear The float and clear properties have no effect on a grid item.
 
 https://codepen.io/rachelandrew/pen/YZeqZv
  • 88. .grid > div { display: inline-block; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } display: inline-block The properties associated with something being inline-block cease to apply.
 
 https://codepen.io/rachelandrew/pen/vxdGjQ
  • 89. .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 boxes will not be generated and the item will become a grid item.
 
 https://codepen.io/rachelandrew/pen/bqLpQN
  • 90. .grid > div { display: inline-block; vertical-align: top; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } The vertical-align property Can be used as a fallback for box alignment and ceases to apply on grid items.
 
 https://codepen.io/rachelandrew/pen/vxdGaQ
  • 91. .grid { column-count: 3; width: 500px; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); } Multiple-column layout Multiple-column layout properties cease to apply in grid layout.
 
 https://codepen.io/rachelandrew/pen/JWpXxv
  • 92. .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 Grid will override flex layout and shares box alignment properties.
 
 https://codepen.io/rachelandrew/pen/YZeqMB
  • 93. Overrides inside @supports are mostly widths & margins
  • 94. * { box-sizing: border-box; } .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; } Override widths in feature queries Watch out for widths in your fallback layouts.
 
 https://codepen.io/rachelandrew/pen/JWpXNr
  • 96. Edge Grid implementation ▸ Updated implementation in Windows Insider build - will ship in October ▸ Currently tied to the IE10 implementation ▸ Prefixed with -ms ▸ No auto-placement or grid-template-areas layout ▸ For simple line-based positioning it works ▸ More at https://rachelandrew.co.uk/archives/2017/04/04/edge-starts-work- on-their-grid-implementation-update/
  • 97. Autoprefixer can add -ms-grid prefixes. This is rarely helpful.
  • 98. March 2017 March 2017 March 2017 March 2017 March 2017 17 Oct 2017
  • 99. Let browser vendors know which features you want.
  • 103. .exclusion { -ms-wrap-flow: both; wrap-flow: both; } Exclusions Defines the wrap-flow property, which enables wrapping content round all sides of an element.
  • 105. You can get involved in the future of CSS.
  • 108. Get involved with CSS ▸ Comment on or raise new issues against CSS specifications ▸ Raise bugs against browsers ▸ Vote on features where browsers have a platform to do so ▸ Write about new features - it demonstrates we want them ▸ Be nice while doing it. Browser engineers and spec editors work within constraints just as you do in your projects.
  • 110. Find out more I made you some resources Visit Grid by Example for worked examples, and a free video tutorial:
 http://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 

  • 111. The New 
 CSS Layout October 10th 2017