A presentation at Front End PDX July Meetup in July 2018 in Portland, OR, USA by mJordan Brady
Modern L ay out s: Modern L ay out s: F l e x b o x ,
C S S
G r i d ,
a n d
B e y o n d F l e x b o x ,
C S S
G r i d ,
a n d
B e y o n d m i c h e l l e j l . c om m i c h e l l e j l . c om m i c h e l l e @ m i c h e l l e j l . c om m i c h e l l e @ m i c h e l l e j l . c om @ m i c h e l l e j l e v i n e @ m i c h e l l e j l e v i n e
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?
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?
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?
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 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 @ 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 Håk on Wium Lie published the first dr aft of the Cascading HTML Style Sheets proposal 1994 The W orld Wide W eb Consortium (W3C) became oper ational 1995 1 9 9 5 @ 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 The W orld Wide W eb Consortium (W3C) became oper ational 1995 1996 CSS le v el 1 emerged as a W3C Recommendation 1 9 9 5 1 9 9 6 @ 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 The W orld Wide W eb Consortium (W3C) became oper ational 1995 1996 CSS le v el 1 emerged as a W3C Recommendation 1998 CSS le v el 2 accepted as W3C Recommendation 1 9 9 5 1 9 9 6 1 9 9 8 @ 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 @ 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 }
< 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
@ 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
@ 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
@ 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
@ 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
@ 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
@ 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
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 /
f l e x b o x h t t ps : / / c a n i u s e . c o m /
f l e x b o x @ 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 /
f l e x b o x h t t ps : / / c a n i u s e . c o m /
f l e x b o x @ 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 /
f l e x b o x h t t ps : / / c a n i u s e . c o m /
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
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 ; } . i t e m { o r d e r : 1 ; f l e x g r o w : 4 ; f l e x s h r i n k : 1 ; f l e x b a s i s : 5 e m ; a l i g n s e l f : f l e x e n d ; } @ 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 ; } . i t e m { o r d e r : 1 ; f l e x g r o w : 4 ; f l e x s h r i n k : 1 ; f l e x b a s i s : 5 e m ; a l i g n s e l f : f l e x e n d ; } f l e x : 0 1 a u t o ; @ 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
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
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 C an I St art C an I St art Today? Today?
@ 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 /
g ri d
@ 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 /
g ri d
@ 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 /
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);
}
@ 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);
}
@ 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 ;
}
@ 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 ;
}
@ 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 ;
}
@ 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 ;
}
@ 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 ;
}
@ 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 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
@ 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
@ m i c h e l l e jl e v i n e 1
@ m i c h e l l e jl e v i n e 1 2
@ m i c h e l l e jl e v i n e 1 2 3
@ m i c h e l l e jl e v i n e 1 2 3 4
@ 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" ;
}
.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" ;
}
.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" ;
}
.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" ;
}
.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
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
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/
skl.sh/ r achel
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
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 -->
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
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
t o -fle x b o x / M D N
F l e x b o x
C o n c e pt s
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
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
1 / C o u rs e :
W h a t
T h e
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
g ri d / M D N
G ri d
L a y o u t
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
g r i d / W 3 C
G ri d
L a y o u t
Spe c s
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
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
g ri d s /
