A presentation at HTML5DevConf Autumn 2015 in in San Francisco, CA, USA by Manuel Rego Casasnovas
C S S
G R I D
L A Y O U T F R O M
T H E
I N S I D E
O U T M A N U E L
R E G O
C A S A S N O V A S
( ) @ r e g o c a s H T M L 5 D e v C o n f
A u t u m n
2 0 1 5
/
2 0
O c t o b e r
2 0 1 5
( S a n
F r a n c i s c o )
A B O U T
M E C S S
G r i d
L a y o u t
i m p l e m e n t o r
( C h r o m i u m / B l i n k
& S a f a r i / W e b K i t ) M e m b e r
o f
I g a l i a
W e b
P l a t f o r m
T e a m
G R I D S
E V E R Y W H E R E
G R I D S
E V E R Y W H E R E
1 9 9 6
E V O L U T I O N
< T A B L E
😱
F L O A T 😰
D I S P L A Y :
B L O C K ; ὣ
D I S P L A Y :
T A B L E ; ὢ�
C S S
F R A M E W O R K S ὠ
D I S P L A Y :
F L E X ; ὠ
D I S P L A Y :
G R I D ; ὠ
G R I D
C O N C E P T S H e a d e r M a i n A s i d e F o o t e r
G R I D
L I N E S H e a d e r M a i n A s i d e F o o t e r 1 2 3 1 2 3 4
G R I D
T R A C K S
G R I D
T R A C K S R O W S H e a d e r M a i n A s i d e F o o t e r
G R I D
T R A C K S C O L U M N S H e a d e r M a i n A s i d e F o o t e r
G R I D
C E L L S H e a d e r M a i n A s i d e F o o t e r
G R I D
A R E A S H e a d e r M a i n A s i d e F o o t e r
D I S P L A Y :
G R I D ; N e w
f o r m a t t i n g
c o n t e x t
T R A C K
c o l u m n s
&
r o w s C r e a t e
b o x e s
f r o m
C S S !
T R A C K
S I Z I N G
E X A M P L E A B C D . g r i d
{
d i s p l a y :
g r i d ;
c o l u m n s :
;
r o w s :
;
} D I V a C L A S S G R I D a a a a D I V a C L A S S A ! D I V a a a a D I V a C L A S S B " D I V a a a a D I V a C L A S S C
D I V a a a a D I V a C L A S S D $ D I V D I V
P L A C E M E N T
c o l u m n
&
r o w D O M
o r d e r
≠
V i s u a l
o r d e r
P L A C E M E N T
E X A M P L E A B C . g r i d
{
d i s p l a y :
g r i d ;
g r i d :
2 0 0 p x
2 0 0 p x
/
1 0 0 p x
1 0 0 p x ;
} . a
{
} D I V a C L A S S G R I D a a a a D I V a C L A S S A ! D I V a a a a D I V a C L A S S B " D I V a a a a D I V a C L A S S C
D I V D I V
N A M E D
G R I D
L I N E S U s e
c u s t o m
i d e n t i f i e r s
t o
r e f e r e n c e
l i n e s A
l i n e
c a n
h a v e
s e v e r a l
n a m e s
N A M E D
L I N E S
E X A M P L E A B C . g r i d
{
d i s p l a y :
g r i d ;
c o l u m n s :
[ l e f t ]
1 0 0 p x
[ m i d d l e
c e n t e r ]
2 0 0 p x
[ r i g h t ] ;
} D I V a C L A S S G R I D a a a a D I V a C L A S S A ! D I V a a a a D I V a C L A S S B " D I V a a a a D I V a C L A S S C
D I V D I V
G R I D
a r e a s
G R I D
A R E A S
E X A M P L E A B C D . g r i d
{
d i s p l a y :
g r i d ;
c o l u m n s :
1 0 0 p x ;
r o w s :
7 5 p x ;
a r e a s :
" h e a d
h e a d "
" n a v
m a i n "
" f o o t
f o o t " ;
} . a
{
a r e a :
h e a d ;
} . b
{
a r e a :
m a i n ;
} . c
{
a r e a :
n a v ;
} . d
{
a r e a :
f o o t ;
} D I V a C L A S S G R I D a a a a D I V a C L A S S A ! D I V a a a a D I V a C L A S S B " D I V a a a a D I V a C L A S S C
D I V a a a a D I V a C L A S S D $ D I V D I V
A L I G N M E N T
s p e c C S S
B o x
A l i g n m e n t H o r i z o n t a l
&
v e r t i c a l
c e n t e r i n g !
I T E M S
A L I G N M E N T
E X A M P L E A B C . g r i d
{
d i s p l a y :
g r i d ;
g r i d :
2 0 0 p x
2 0 0 p x
/
1 0 0 p x
1 0 0 p x ;
i t e m s :
;
i t e m s :
;
} . b
{
s e l f :
;
s e l f :
;
} D I V a C L A S S G R I D a a a a D I V a C L A S S A ! D I V a a a a D I V a C L A S S B " D I V a a a a D I V a C L A S S C
D I V D I V
T R A C K S
A L I G N M E N T
E X A M P L E A B C . g r i d
{
d i s p l a y :
g r i d ;
g r i d :
1 5 0 p x
1 5 0 p x
/
1 0 0 p x
1 0 0 p x ;
c o n t e n t :
;
c o n t e n t :
;
} D I V a C L A S S G R I D a a a a D I V a C L A S S A ! D I V a a a a D I V a C L A S S B " D I V a a a a D I V a C L A S S C
D I V D I V
G R I D
g a p
&
g a p
G R I D
G U T T E R S
E X A M P L E A B C D E . g r i d
{
d i s p l a y :
g r i d ;
g r i d :
1 0 0 p x
1 0 0 p x
1 0 0 p x
/
1 0 0 p x
1 0 0 p x ;
g a p :
;
g a p :
;
} D I V a C L A S S G R I D a a a a D I V a C L A S S A ! D I V a a a a D I V a C L A S S B " D I V a a a a D I V a C L A S S C
D I V a a a a D I V a C L A S S D $ D I V a a a a D I V a C L A S S E % D I V D I V
f l o w
P L A C E M E N T
E X A M P L E I n p u t C h e c k b o x
S u b m i t f o r m f o r m
{
} l a b e l
{
} i n p u t
{
} F O R M a a a a L A B E L ) N P U T L A B E L a a a a I N P U T a a a a L A B E L
H E C K B O X L A B E L a a a a I N P U T a T Y P E C H E C K B O X a a a a B U T T O N 3 U B M I T a F O R M B U T T O N F O R M
R E S P O N S I V E
G R I D S F l e x i b l e
t r a c k
s i z i n g M e d i a
Q u e r i e s
R E S P O N S I V E
G R I D
E X A M P L E G R I D a [ a a a a D I S P L A Y a G R I D a a a a G R I D a P X a F R a a P X a F R a A U T O a a a a G R I D
T E M P L A T E
A R E A S a H E A D E R a H E A D E R a a a a a a a a a a a a a a a a a a a a a a a a a A S I D E a a M A I N a a a a a a a a a a a a a a a a a a a a a a a a a a a A S I D E a a F O O T E R ]
M E D I A a M A X
W I D T H a P X
a [ a a a a G R I D a [ a a a a a a a a G R I D a F R a a P X a F R a P X a A U T O a a a a a a a a G R I D
T E M P L A T E
A R E A S a H E A D E R a a a a a a a a a a a a a a a a a a a a a a a a a a a a a M A I N a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a A S I D E a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a F O O T E R a ] ]
R E S P O N S I V E
G R I D
E X A M P L E H e a d e r M a i n A s i d e F o o t e r
&
k e y w o r d s
f o r
A U T O
f i t r e p e a t ( )
A U T O
R E P E A T
E X A M P L E . g r i d
{
d i s p l a y :
g r i d ;
c o l u m n s :
f i l l ,
1 0 0 p x ) ;
} D I V a C L A S S G R I D a a a a D I V ! D I V a a a a D I V " D I V a a a a D I V
D I V a a a a D I V $ D I V a a a a D I V % D I V D I V A B C D E
S U B G R I D S N e s t e d
G r i d A B C D E S 1 S u b 2 S 3 S u b 4 S u b g r i d A B C D E S u b 1 S u b 2 S u b 3 S u b 4
S U B G R I D S
E X A M P L E I n p u t C h e c k b o x S u b m i t f o r m u l
{
d i s p l a y :
g r i d ;
} l i
{
d i s p l a y :
g r i d ;
} l a b e l
{
c o l u m n :
1 ;
} F O R M U L a a a a L I L A B E L ) N P U T L A B E L I N P U T a a a a L I L A B E L
H E C K B O X L A B E L I N P U T a a a a L I B U T T O N 3 U B M I T a F O R M B U T T O N U L F O R M
H O W
D O E S
I T
W O R K ?
E X A M P L E D I V a C L A S S G R I D a a a a D I V a C L A S S T I T L E 4 I T L E D I V a a a a D I V a C L A S S N A V . A V D I V a a a a D I V a C L A S S M A I N , O R E M a I P S U M D I V a a a a D I V a C L A S S A S I D E ! D D I V a a a a D I V a C L A S S A S I D E ! D W O R D D I V D I V G R I D a a [ a D I S P L A Y a G R I D a a a a a a a a a W I D T H a P X a a a a a a a a a G R I D
T E M P L A T E
C O L U M N S a P X a F R a A U T O a a a a a a a a a G R I D
T E M P L A T E
R O W S a P X a A U T O a ] T I T L E a [ a G R I D
R O W a a G R I D
C O L U M N a a ] N A V a a a [ a G R I D
R O W a a G R I D
C O L U M N a a ] M A I N a a [ a G R I D
R O W a a G R I D
C O L U M N a a ] A S I D E a [ a a a a a a a a a a a a a a G R I D
C O L U M N a a ]
E M P T Y
G R I D
P L A C E
I T E M S T i t l e . t i t l e
{
r o w :
1 ;
c o l u m :
2 ;
}
P L A C E
I T E M S T i t l e N a v . n a v
{
r o w :
2 ;
c o l u m :
1 ;
}
P L A C E
I T E M S T i t l e N a v L o r e m
i p s u m . . . . m a i n
{
r o w :
2 ;
c o l u m :
2 ;
}
P L A C E
I T E M S T i t l e N a v L o r e m
i p s u m . . . A d . a s i d e
{
c o l u m :
3 ;
}
P L A C E
I T E M S T i t l e N a v L o r e m
i p s u m . . . A d A d w o r d . a s i d e
{
c o l u m :
3 ;
}
P L A C E
I T E M S T i t l e N a v L o r e m
i p s u m . . . A d A d w o r d
F I X E D
C O L U M N T i t l e N a v L o r e m
i p s u m . . . A d A d w o r d 2 0 0 p x
I N T R I N S I C
C O L U M N T i t l e N a v L o r e m
i p s u m . . . A d 6 0 p x A d w o r d 1 3 0 p x 2 0 0 p x a u t o
I N T R I N S I C
C O L U M N T i t l e N a v L o r e m
i p s u m . . . A d A d w o r d 2 0 0 p x 1 3 0 p x
F L E X I B L E
C O L U M N T i t l e N a v L o r e m
i p s u m . . . A d A d w o r d 2 0 0 p x 1 3 0 p x 1 f r
F L E X I B L E
C O L U M N T i t l e N a v L o r e m
i p s u m . . . A d A d w o r d 2 0 0 p x 1 3 0 p x 4 7 0 p x
L A Y O U T
I T E M S T i t l e N a v L o r e m
i p s u m
d o l o r
s i t
a m e t ,
c o n s e c t e t u r
a d i p i s c i n g
e l i t ,
s e d
d o
i u s m o d
t e m p o r
i n c i d i d u n t
u t
l a b o r e
e t
d o l o r e
m a g n a
a l i q u a . A d A d w o r d 2 0 0 p x 1 3 0 p x 4 7 0 p x
F I X E D
R O W T i t l e N a v L o r e m
i p s u m
d o l o r
s i t
a m e t ,
c o n s e c t e t u r
a d i p i s c i n g
e l i t ,
s e d
d o
i u s m o d
t e m p o r
i n c i d i d u n t
u t
l a b o r e
e t
d o l o r e
m a g n a
a l i q u a . A d A d w o r d 2 0 0 p x 1 3 0 p x 4 7 0 p x 1 0 0 p x
I N T R I N S I C
R O W T i t l e N a v 6 0 p x L o r e m
i p s u m
d o l o r
s i t
a m e t ,
c o n s e c t e t u r
a d i p i s c i n g
e l i t ,
s e d
d o
i u s m o d
t e m p o r
i n c i d i d u n t
u t
l a b o r e
e t
d o l o r e
m a g n a
a l i q u a . 1 6 0 p x A d A d w o r d 6 0 p x 2 0 0 p x 1 3 0 p x 4 7 0 p x 1 0 0 p x a u t o
I N T R I N S I C
R O W T i t l e N a v L o r e m
i p s u m
d o l o r
s i t
a m e t ,
c o n s e c t e t u r
a d i p i s c i n g
e l i t ,
s e d
d o
i u s m o d
t e m p o r
i n c i d i d u n t
u t
l a b o r e
e t
d o l o r e
m a g n a
a l i q u a . A d A d w o r d 2 0 0 p x 1 3 0 p x 4 7 0 p x 1 0 0 p x 1 6 0 p x
S T R E T C H
I T E M S T i t l e N a v L o r e m
i p s u m
d o l o r
s i t
a m e t ,
c o n s e c t e t u r
a d i p i s c i n g
e l i t ,
s e d
d o
i u s m o d
t e m p o r
i n c i d i d u n t
u t
l a b o r e
e t
d o l o r e
m a g n a
a l i q u a . A d A d w o r d 2 0 0 p x 1 3 0 p x 4 7 0 p x 1 0 0 p x 1 6 0 p x
F A S T E R
G R I D S
F I X E D
V S
I N T R I N S I C
S I Z I N G 2 0 0 p x
i s
f a s t e r
t h a n
a u t o
I N T R I N S I C
V S
F L E X I B L E
S I Z I N G a u t o
i s
f a s t e r
t h a n
1 f r
V E R T I C A L
S T R E T C H V e r t i c a l
s t r e t c h
i n
s i z e d
i t e m s
i s
s l o w e r
t h a n
o t h e r ( e . g .
s t a r t ) I t e m
H O R I Z O N T A L
S T R E T C H A v o i d
h o r i z o n t a l
s t r e t c h
( e . g .
s t a r t )
i n
s i z e d i t e m s
i s
s l o w e r I t e m
S T A T U S
W 3 C
S P E C I F I C A T I O N C S S
G r i d
L a y o u t
g r i d / S t a r t e d
b y
M i c r o s o f t
i n
2 0 1 0 L a s t
W o r k i n g
D r a f t
1 7
S e p t e m b e r
2 0 1 5 W 3 C
T e s t
S u i t e
C A N
I
U S E
G R I D ?
ὢ
B R O W S E R S
A D O P T I O N
ὠ O l d
i m p l e m e n t a t i o n s i n c e
I E
1 0 P r e f i x e d :
m s M o r e
c o m p l e t e i m p l e m e n t a t i o n ⚐ E x p e r i m e n t a l
W e b P l a t f o r m
F e a t u r e s E n a b l e d
b y
d e f a u l t
o n W e b K i t
N i g h t l i e s P r e f i x e d :
w e b k i t I m p l e m e n t a t i o n
s t a r t e d e a r l y
t h i s
y e a r ⚐ l a y o u t . c s s . g r i d . e n a b l e d P o l y f i l l :
p o l y f i l l
E X A M P L E S
b y
I g a l i a
b y
R a c h e l
l a y o u t / h t t p : / / g r i d b y e x a m p l e . c o m /
A C K N O W L E D G E M E N T S
a n d
w o r k i n g
t o g e t h e r
t o
b u i l d
a
b e t t e r w e b I g a l i a B l o o m b e r g
©
e u p h r o
h t t p s : / / w w w . f l i c k r . c o m / p h o t o s / e u p h r o / 8 4 5 5 9 6 9 8 6 0 / T H A N K
Y O U ! T w i t t e r :
M a i l :
B l o g :
@ r e g o c a s r e g o @ i g a l i a . c o m h t t p : / / b l o g s . i g a l i a . c o m / m r e g o /
Layout on the web has been missing a proper solution for creating grid designs since the beginning. But this dark period is coming to an end with the new CSS Grid Layout spec. Grid layout is being implemented in every major web engine. The good news is that it will be hitting your browsers very soon.
During this talk we will not only review its syntax and main features, but also explain the internal details about what the browser has to do to render a CSS grid. After the talk, you'll be able to start playing with CSS Grid Layout, understanding the underlying steps involved, and provide feedback to the spec editors and browser implementors.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.