CSS Grid Layout is just around the corner

A presentation at CSSConf US 2015 in June 2015 in New York, NY, USA by Manuel Rego Casasnovas

C S S
G R I D
L A Y O U T I S
J U S T
A R O U N D T H E
C O R N E R 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 C S S C o n f
U S
2 0 1 5
/
1 8
1 9
J u n e
2 0 1 5
( N e w
Y o r k )

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 s F l o a t s I n l i n e s C S S
F r a m e w o r k s C S S
F l e x i b l e
B o x C S S
G r i d
L a y o u t

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
S I Z I N G g r i d
t e m p l a t e
c o l u m n s
&
g r i d
t e m p l a t e
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 ;
g r i d
t e m p l a t e
c o l u m n s :
;
g r i d
t e m p l a t e
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
P R O P E R T I E S g r i d
c o l u m n
&
g r i d
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

G R I D
A R E A S g r i d
t e m p l a t e
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 ;
g r i d
a u t o
c o l u m n s :
1 0 0 p x ;
g r i d
a u t o
r o w s :
7 5 p x ;
g r i d
t e m p l a t e
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
{
g r i d
a r e a :
h e a d ;
} . b
{
g r i d
a r e a :
m a i n ;
} . c
{
g r i d
a r e a :
n a v ;
} . d
{
g r i 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 U T O
P L A C E M E N T g r i d
a u t o
f l o w

A U T O
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

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 !

A L I G N M E N T
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 ;
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 l i g n
i t e m s :
;
j u s t i f y
i t e m s :
;
} . b ,
. c
{
w i d t h :
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 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

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

R O W / C O L U M N
G A P S A B C . g r i d
{
d i s p l a y :
g r i d ;
g r i d :
1 0 0 p x
2 5 p x
1 0 0 p x
2 5 p x
1 0 0 p x
/
1 0 0 p x ;
} . a
{
g r i d
c o l u m n :
1 ;
} 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 P r o p o s a l :
r e u s e
c o l u m n
g a p
&
i n t r o d u c e
r o w
g a p

R O W / C O L U M N
G A P S F a k e
w i t h
a l i g n m e n t A B C . 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 ;
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 ;
} 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

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
2 S u b
4 A B C D E S 1 S u b 2 S
2 S u b
4 S u b g r i d

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
{
g r i d
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
{
g r i d
r o w :
1 ;
g r i d
c o l u m n :
2 ;
}

P L A C E
I T E M S T i t l e N a v . n a v
{
g r i d
r o w :
2 ;
g r i d
c o l u m n :
1 ;
}

P L A C E
I T E M S L o r e m
i p s u m . . . T i t l e N a v . m a i n
{
g r i d
r o w :
2 ;
g r i d
c o l u m n :
2 ;
}

P L A C E
I T E M S L o r e m
i p s u m . . . T i t l e N a v A d . a s i d e
{
g r i d
c o l u m n :
3 ;
}

P L A C E
I T E M S L o r e m
i p s u m . . . T i t l e N a v A d A d w o r d . a s i d e
{
g r i d
c o l u m n :
3 ;
}

P L A C E
I T E M S L o r e m
i p s u m . . . T i t l e N a v A d A d w o r d

F I X E D
C O L U M N L o r e m
i p s u m . . . T i t l e N a v A d A d w o r d 1 0 0 p x

I N T R I N S I C
C O L U M N L o r e m
i p s u m . . . T i t l e N a v 1 0 0 p x a u t o A d A d w o r d 3 0 p x 7 0 p x

I N T R I N S I C
C O L U M N L o r e m
i p s u m . . . T i t l e N a v 1 0 0 p x 7 0 p x A d A d w o r d

F L E X I B L E
C O L U M N L o r e m
i p s u m . . . T i t l e N a v 1 0 0 p x 1 f r 7 0 p x A d A d w o r d

F L E X I B L E
C O L U M N L o r e m
i p s u m . . . T i t l e N a v 1 0 0 p x 2 3 0 p x 7 0 p x A d A d w o r d

L A Y O U T
I T E M S 1 0 0 p x 2 3 0 p x 7 0 p x A d A d w o r d 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
e 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 .

F I X E D
R O W 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
e 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 0 0 p x 2 3 0 p x 7 0 p x A d A d w o r d T i t l e N a v 5 0 p x

I N T R I N S I C
R O W 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
e 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 0 0 p x 2 3 0 p x 7 0 p x A d A d w o r d T i t l e N a v 5 0 p x a u t o 3 0 p x 1 2 0 p x 3 0 p x

I N T R I N S I C
R O W 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
e 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 0 0 p x 2 3 0 p x 7 0 p x A d A d w o r d T i t l e N a v 5 0 p x 1 2 0 p x

S T R E T C H
I T E M S 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
e 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 0 0 p x 2 3 0 p x 7 0 p x A d A d w o r d T i t l e N a v 5 0 p x 1 2 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 1 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

S T R E T C H
I N
A U T O
S I Z E D
I T E M S s t r e t c h
i s
s l o w e r
t h a n
o t h e r
( e . g .
s t a r t )

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
h t t p : / / d e v . w 3 . o r g / c s s w g / c s s
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
M a r c h
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
v e r s i o n
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 o n
2 0 1 5 ⚐ 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 :
h t t p s : / / g i t h u b . c o m / F r e m y C o m p a n y / c s s
g r i d
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
A n d r e w h t t p : / / i g a l i a . g i t h u b . i o / c s s
g r i d
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

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 /

Manuel Rego Casasnovas
@rego

1 / 60

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

HTML Slides