Modern Layouts: Flexbox, CSS Grid, and Beyond

A presentation at Front End PDX July Meetup in July 2018 in Portland, OR, USA by mJordan Brady

Who am I? Why Should You Listen to Me? Who am I? Why Should You Listen to Me?

Who am I? Why Should You Listen to Me? Who am I? Why Should You Listen to Me? m i c h e l l e jl . c o m m i c h e l l e @ m i c h e l l e jl . c o m @ m i c h e l l e jl e v i n e @ m i c h e l l e jl

A Brie f History of the We b A Brie f History of the We b 1 9 9 1 h t t p: / / i n fo . c e rn . c h / @ m i c h e l l e jl e v i n e

A Brie f History of the We b A Brie f History of the We b 1 9 9 1 1 9 9 2 @ m i c h e l l e jl e v i n e

A Brie f History of the We b A Brie f History of the We b 1 9 9 1 1 9 9 2 1 9 9 4 Håk on Wium Lie published the first dr aft of the Cascading HTML Style Sheets proposal 1994 @ m i c h e l l e jl e v i n e

A Brie f History of the We b A Brie f History of the We b 1 9 9 1 1 9 9 2 1 9 9 4 1 9 9 5 1 9 9 6 1 9 9 8 2 0 1 2 @ m i c h e l l e jl e v i n e

A Brie f History of the We b A Brie f History of the We b 1 9 9 1 1 9 9 2 1 9 9 4 1 9 9 5 1 9 9 6 1 9 9 8 2 0 1 2 Color L e v el 3 @ m i c h e l l e jl e v i n e

A Brie f History of the We b A Brie f History of the We b 1 9 9 1 1 9 9 2 1 9 9 4 1 9 9 5 1 9 9 6 1 9 9 8 2 0 1 2 Color L e v el 3 @ m i c h e l l e jl e v i n e Namespaces

A Brie f History of the We b A Brie f History of the We b 1 9 9 1 1 9 9 2 1 9 9 4 1 9 9 5 1 9 9 6 1 9 9 8 2 0 1 2 Color L e v el 3 @ m i c h e l l e jl e v i n e Namespaces Selectors L e v el 3

@ m i c h e l l e jl e v i n e L ay out s are b a sic ally a me s s L ay out s are b a sic ally a me s s

< t a b l e
@ m i c h e l l e jl e v i n e L ay out s are b a sic ally a me s s L ay out s are b a sic ally a me s s

< t a b l e
@ m i c h e l l e jl e v i n e L ay out s are b a sic ally a me s s L ay out s are b a sic ally a me s s { d i s p l a y : t a b l e }

< t a b l e
@ m i c h e l l e jl e v i n e L ay out s are b a sic ally a me s s L ay out s are b a sic ally a me s s { f l o a t : r i g h t } { d i s p l a y : t a b l e }

< t a b l e
@ m i c h e l l e jl e v i n e L ay out s are b a sic ally a me s s L ay out s are b a sic ally a me s s { f l o a t : r i g h t } { p o s i t i o n : a b s o l u t e } { d i s p l a y : t a b l e }

@ m i c h e l l e jl e v i n e How c an we How c an we a void div soup? a void div soup?

{ displa y: fle x } @ m i c h e l l e jl e v i n e

{ displa y: fle x } T h e F l e x i b l e Bo x M o d u l e , u s u a l l y re fe rre d t o a s fle x b o x ,
w a s
d e s i g n e d
a s
a
o n e
d i m e n s i o n a l
l a y o u t
m o d e l ,
a n d
a s
a
m e t h o d t h a t
c o u l d
o ffe r s pa c e
d i s t ri b u t i o n
b e t w e e n i t e m s
i n
a n
i n t e rfa c e
a n d
po w e rfu l a l i g n m e n t c a pa b i l i t i e s . @ m i c h e l l e jl e v i n e

@ m i c h e l l e jl e v i n e C an I St art C an I St art Today? Today?

h t t ps : / / c a n i u s e . c o m /
s e a r c h
f l e x b o x h t t ps : / / c a n i u s e . c o m /
s e a r c h
f l e x b o x @ m i c h e l l e jl e v i n e

Fle x box Vo c a b ulary Fle x box Vo c a b ulary @ m i c h e l l e jl e v i n e

Fle x box Vo c a b ulary Fle x box Vo c a b ulary . c o n t a i n e r { d i s p l a y : f l e x ; f l e x d i r e c t i o n : r o w | c o l u m n ; f l e x w r a p : w r a p ; j u s t i f y c o n t e n t : s p a c e b e t w e e n ; a l i g n i t e m s : s t r e t c h ; } @ m i c h e l l e jl e v i n e

bit.ly/michellejl-grid bit.ly/michellejl-grid @ m i c h e l l e jl e v i n e Let's Try It! Let's Try It! F l e x b o x N a v B a r

c s s
t ri c k s . c o m / s n i p p e t s / c s s / a
g u i d e
t o -fle x b o x /fle x b o x f ro g g y . c o m / b e n n e t t f e e l y . c o m /fle x p l o re r/ More Fle x box! More Fle x box!

{ displa y: grid } @ m i c h e l l e jl e v i n e

{ displa y: grid } C SS G r i d
L a y o u t
e x c e l s
a t
d i v i d i n g
a
pa g e i n t o
ma jo r re g i o n s
o r d efin i n g
t h e re l a t i o n s h i p i n
t e rm s
o f s i z e ,
po s i t i o n ,
a n d l a y e r ,
b e t w e e n
pa rt s
o f a
c o n t ro l
b u i l t
fro m H T M L
pri m i t i v e s .
G ri d
i s
fo r w o rk i n g
i n
t w o
d i m e n s i o n s . @ m i c h e l l e jl e v i n e

@ m i c h e l l e jl e v i n e h t t ps : / / c a n i u s e . c o m /
s e a rc h
g ri d

@ m i c h e l l e jl e v i n e F allb ack s for F allb ack s for Older Brow ser s Older Brow ser s h t t ps : / / h a c k s . m o z i l l a . o rg / 2 0 1 6 / 0 8 / u s i n g -fe a t u re -q u e ri e s -i n -c s s / L a y o u t L a n d : R e s i l i e n t C SS

@ m i c h e l l e jl e v i n e .grid {
display : grid;
}

@ m i c h e l l e jl e v i n e .grid {
display : grid;
grid-template-columns : repeat (4, 1fr);
}

@ m i c h e l l e jl e v i n e .grid {
display : grid;
grid-template-columns : repeat (4, 1fr);
grid-template-rows : 100px
200px ;
}

@ m i c h e l l e jl e v i n e .grid {
display : grid;
grid-template-columns : repeat (4, 1fr);
grid-template-rows : 100px
200px ;
grid-gap-columns : 10px ;
grid-gap-rows : 5px ;
}

bit.ly/michellejl-grid bit.ly/michellejl-grid @ m i c h e l l e jl e v i n e Let's Try It! Let's Try It! G r i d L a y o u t 1

@ m i c h e l l e jl e v i n e Ne w Grid Unit s Ne w Grid Unit s

@ m i c h e l l e jl e v i n e Ne w Grid Unit s Ne w Grid Unit s m i n c o n t e n t

@ m i c h e l l e jl e v i n e Ne w Grid Unit s Ne w Grid Unit s m i n c o n t e n t m a x c o n t e n t

@ m i c h e l l e jl e v i n e Ne w Grid Unit s Ne w Grid Unit s m i n c o n t e n t m a x c o n t e n t fr

@ m i c h e l l e jl e v i n e Ne w Grid Unit s Ne w Grid Unit s m i n c o n t e n t m a x c o n t e n t fr m i n m a x ( )

@ m i c h e l l e jl e v i n e E xplicit Grid v s . Implicit Grid E xplicit Grid v s . Implicit Grid h t t ps : / / c s s -t ri c k s . c o m / d i ffe re n c e -e x pl i c i t -i m pl i c i t -g ri d s /

@ m i c h e l l e jl e v i n e 1 -4 2 -3 3 -2 4 -1

bit.ly/michellejl-grid bit.ly/michellejl-grid @ m i c h e l l e jl e v i n e Let's Try It! Let's Try It! G r i d L a y o u t 2 : C e l l s G r i d L a y o u t 3 : N a m e d L i n e s G r i d L a y o u t 5 : O v e r l a y

.grid {
display : grid;
grid-template-columns : repeat (3, 1fr);
grid-template-rows : repeat (4, 25px);
grid-template-areas : "a a a"
"b b c"
"b b c"
"d d d" ;
}

bit.ly/michellejl-grid bit.ly/michellejl-grid @ m i c h e l l e jl e v i n e Let's Try It! Let's Try It! G r i d L a y o u t 4 : G r i d A r e a

http:/ /labs.jensimmons.com/2016/ e xamples/ spices-1.html @ m i c h e l l e jl e v i n e No More No More Media Querie s? Media Querie s?

http:/ /labs.jensimmons.com/2016/ e xamples/ spices-1.html @ m i c h e l l e jl e v i n e

@ m i c h e l l e jl e v i n e Grid or Fle x box? Grid or Fle x box? h t t ps : / / r a c h e l a n d re w . c o . u k / a rc h i v e s / 2 0 1 6 / 0 3 / 3 0 / s h o u l d -i -u s e -g ri d -o r-fl e x b o x /

@ m i c h e l l e jl e v i n e Grid or Fle x box? Grid or Fle x box? h t t ps : / / r a c h e l a n d re w . c o . u k / a rc h i v e s / 2 0 1 6 / 0 3 / 3 0 / s h o u l d -i -u s e -g ri d -o r-fl e x b o x / or floats??

@ m i c h e l l e jl e v i n e Re al E x ample s Ple a se! Re al E x ample s Ple a se!

h t t p: / / l a b s . je n s i m m o n s . c o m / @ m i c h e l l e jl e v i n e

h t t p: / / l a b s . je n s i m m o n s . c o m / 2 0 1 7 / 0 3 -0 0 8 . h t m l @ m i c h e l l e jl e v i n e

h t t p: / / l a b s . je n s i m m o n s . c o m / 2 0 1 7 / 0 1 -0 1 1 . h t m l @ m i c h e l l e jl e v i n e

h t t ps : / / c s s g ri d . d e s i g n / @ m i c h e l l e jl e v i n e More CSS Grid in the Wild: More CSS Grid in the Wild:

R achel Andre w R achel Andre w Jen Simmons Jen Simmons jensimmons.com/ r achelandrew .co.uk/ @ jensimmons @ r achelandrew gridb y e xample.com/ thecssworkshop.com/ Know these humans. The y are AMAZING. Read their blogs, newsletters, and books, check out their code, learn from their videos. y outube.com/la y outland cssla y out.news/

m o n k i k F re e pi k I c o n s
f r o m
I c o n s
f r o m
w w w . f l a t i c o n . c o m w w w . f l a t i c o n . c o m Sm a s h i c o n s F re e pi k P ro s y m b o l s F re e pi k F re e pi k F re e pi k F re e pi k F re e pi k pre t t y c o n s Sm a s h i c o n s A l fre d o H e rn a n d e z @ m i c h e l l e jl e v i n e s ri p F re e pi k ph o t o 3 i d e a _ s t u d i o

Link s Link s C E R N :
B i rt h
o f
t h e
W e b
h t t ps : / / h o m e . c e rn / t o pi c s / b i r t h
w e b F i rs t
W e b s i t e
h t t p: / / i n f o . c e rn . c h / L i n e
M o d e
B ro w s e r -->
h t t p: / / l i n e
m o d e . c e rn . c h / A
B r i e f
H i s t or y
of
t h e
W e b A
B r i e f
H i s t or y
of
t h e
W e b A
b ri e f
h i s t o ry
o f
C SS u n t i l
2 0 1 6
h t t ps : / / w w w . w 3 . o rg / St y l e / C SS2 0 / h i s t o ry . h t m l W o rl d
W i d e
W e b
C o n s o rt i u m
h t t ps : / / w w w . w 3 . o rg / W 3 C
R e c o m m e n d a t i o n
T r a c k
h t t ps : / / w w w . w 3 . o rg / 2 0 0 4 / 0 2 / P ro c e s s
2 0 0 4 0 2 0 5 / t r . h t m l B o o t s t r a p -->
h t t ps : / / g e t b o o t s t r a p. c o m / Z e rb
F o u n d a t i o n
h t t ps : / / f o u n d a t i o n . z u rb . c o m / M a t e ri a l i z e
h t t ps : / / m a t e ri a l i z e c s s . c o m / B u l m a
h t t ps : / / b u l m a . i o / P u re C SS -->
h t t ps : / / pu re c s s . i o / M i l l i g r a m
h t t ps : / / m i l l i g r a m . i o / C SS F r a m e w o rk s B l a z e
U I
h t t ps : / / w w w . b l a z e u i . c o m / B o u rb o n
h t t ps : / / b o u rb o n . i o / B o u rb o n
N e a t
h t t ps : / / n e a t . b o u rb o n . i o / @ m i c h e l l e jl e v i n e

Link s Link s C o m pl e t e
G u i d e
t o
F l e x b o x
h t t ps : / / c s s
t ri c k s . c o m / s n i ppe t s / c s s / a
g u i d e
t o -fle x b o x / M D N
F l e x b o x
C o n c e pt s
h t t ps : / / d e v e l o pe r . m o z i l l a . o rg / e n
U S/ d o c s / W e b / C SS/ C SS_ F l e x i b l e _ B o x _ L a y o u t / B a s i c _ C o n c e pt s _ o f _ F l e x b o x F l e x b o x M D N
F l e x b o x
I n t ro
h t t ps : / / d e v e l o pe r . m o z i l l a . o rg / e n
U S/ d o c s / L e a rn / C SS/ C SS_ l a y o u t / F l e x b o x C SS R e f e re n c e
h t t ps : / / c s s re f e re n c e . i o /fle x b o x / W 3 C
F l e x i b l e
B o x
Spe c s
h t t ps : / / w w w . w 3 . o rg / T R / c s s -fle x b o x
1 / C o u rs e :
W h a t
T h e
F l e x b o x ? -
h t t ps : / /fle x b o x . i o / F l e x b o x
F ro g g y
h t t ps : / /fle x b o x f ro g g y . c o m / @ m i c h e l l e jl e v i n e

@ m i c h e l l e jl e v i n e C o m pl e t e
G u i d e
t o
C SS G ri d
h t t ps : / / c s s
t ri c k s . c o m / s n i ppe t s / c s s / c o m pl e t e
g u i d e
g ri d / M D N
G ri d
L a y o u t
h t t ps : / / d e v e l o pe r . m o z i l l a . o rg / e n
U S/ d o c s / W e b / C SS/ C SS_ G ri d _ L a y o u t C SS R e f e re n c e
h t t ps : / / c s s re f e re n c e . i o / c s s
g r i d / W 3 C
G ri d
L a y o u t
Spe c s
h t t ps : / / w w w . w 3 . o rg / T R / c s s
g ri d
1 / C o u rs e :
C SS G ri d
h t t ps : / / c s s g ri d . i o / G ri d
G a rd e n
h t t ps : / / c s s g ri d g a rd e n . c o m / C SS G ri d L e a rn
C SS G ri d
h t t ps : / / l e a rn c s s g ri d . c o m / G ri d
B y
E x a m pl e
h t t ps : / / g ri d b y e x a m pl e . c o m / L a y o u t
L a n d
h t t ps : / / w w w . y o u t u b e . c o m / l a y o u t l a n d F l e x b o x
o r G ri d
h t t ps : / / r a c h e l a n d re w . c o . u k / a rc h i v e s / 2 0 1 6 / 0 3 / 3 0 / s h o u l d
i
u s e
g ri d
o r-fl e x b o x / Link s Link s I m pl i c i t
&
E x pl i c i t
G ri d
h t t ps : / / c s s
t ri c k s . c o m / d i f f e re n c e
e x pl i c i t
i m pl i c i t
g ri d s /

mJordan Brady
@michellejl

1 / 113

Part into, part history lesson, part workshop. This talk introduced the audience to CSS Grid and Flexbox and helped them dig in and get started with the code.

Buzz and feedback

Here’s what was said about this presentation on social media.

Want to learn how to use CSS Grid? Catch me at 1 of 3! workshops this month!

There will be a practice version with #FreeCodeCamp (7/9), a version focused on Modern Layouts in React with @WWCodePortland (7/11), and a deep dive hands-on workshop with @frontendpdx (7/17).
— Michelle 🚀 (@MichelleJLevine) July 2, 2018
.@MichelleJLevine dropping knowledge on the history of CSS and using CSS flexbox and grid at tonight's @WWCodePortland JS Study Night 🌠 pic.twitter.com/oG8H4kcIrh
— sarah joy (@superissarah) July 12, 2018
🚀 We’ve got @MichelleJLevine tonight leading a full house in our first ever @frontendpdx hands-on workshop, focusing on practical Flexbox and CSS Grid layout techniques. 💫 pic.twitter.com/2Hzz35KROv
— Dan Manchester (@elseloop) July 18, 2018
🤭 A lot of audible gasps from the audience as @MichelleJLevine live demos CSS Grid on @CodePen and shows off some of @jensimmons’ examples. 🍓
— Dan Manchester (@elseloop) July 18, 2018
Thanks @MichelleJLevine for a great presentation on #cssgrid and #flexbox! 🖥️🖌️ Learned a lot! And thanks @frontendpdx for hosting!
— Nathan Pickard (@NathanPickard) July 19, 2018
Great presentation and demos on #CSS grids by @MichelleJLevine at @frontendpdx yesterday night. @jensimmons's designs are amazing. ⊞ 👍🏼

Fresh cup of coffee ☕️
New git branch ⎇
Now, it's time to replace my nested flexboxes and play with CSS grids! 🤓https://t.co/r5TdyfPB80
— MikeDPad (@mikedpad) July 18, 2018
Well structured grid css examples from @MichelleJLevine.
— Jason Grigsby, ☁4 (@grigs) July 18, 2018
Excited to get hands-on with #CSSgrid with @MichelleJLevine @frontendpdx! pic.twitter.com/5xugNTUbxE
— Andrew Hedges 🏡 (@segdeha) July 18, 2018
Pumped to check out the CSS Grid talk by @MichelleJLevine
— Stephen Fox (@manifoldkaizen) July 18, 2018

Modern Layouts: Flexbox, CSS Grid, and Beyond

o n e

s e a r c h

s e a r c h

s e a r c h

s e a r c h

s e a r c h

s e a r c h

c s s

t ri c k s . c o m / s n i p p e t s / c s s / a

g u i d e

t w o

s e a rc h

s e a rc h

s e a rc h

h t t ps : / / h o m e . c e rn / t o pi c s / b i r t h

h t t p: / / l i n e

h t t ps : / / w w w . w 3 . o rg / 2 0 0 4 / 0 2 / P ro c e s s

h t t ps : / / c s s

t ri c k s . c o m / s n i ppe t s / c s s / a

g u i d e

h t t ps : / / d e v e l o pe r . m o z i l l a . o rg / e n

h t t ps : / / d e v e l o pe r . m o z i l l a . o rg / e n

h t t ps : / / w w w . w 3 . o rg / T R / c s s -fle x b o x

F l e x b o x ? -

h t t ps : / / c s s

t ri c k s . c o m / s n i ppe t s / c s s / c o m pl e t e

g u i d e

h t t ps : / / d e v e l o pe r . m o z i l l a . o rg / e n

h t t ps : / / c s s re f e re n c e . i o / c s s

h t t ps : / / w w w . w 3 . o rg / T R / c s s

g ri d

h t t ps : / / r a c h e l a n d re w . c o . u k / a rc h i v e s / 2 0 1 6 / 0 3 / 3 0 / s h o u l d

i

u s e

g ri d

h t t ps : / / c s s

t ri c k s . c o m / d i f f e re n c e

e x pl i c i t

i m pl i c i t

Link for this presentation:

HTML code for embedding:

Share on social media: