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

Slide 1

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 )

Slide 2

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

Slide 3

G R I D S

E V E R Y W H E R E

Slide 4

1 9 9 6

Slide 5

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

Slide 6

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

Slide 7

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

Slide 8

G R I D

T R A C K S

Slide 9

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

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

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 !

Slide 15

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

Slide 16

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

Slide 17

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

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

Slide 18

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

Slide 19

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

Slide 20

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

Slide 21

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

Slide 22

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 !

Slide 23

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

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

Slide 24

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

Slide 25

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

Slide 26

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

Slide 27

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

Slide 28

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 ;

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

Slide 29

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

Slide 30

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

Slide 31

H O W

D O E S

I T

W O R K ?

Slide 32

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 ]

Slide 33

E M P T Y

G R I D

Slide 34

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 ;

}

Slide 35

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 ;

}

Slide 36

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 ;

}

Slide 37

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 ;

}

Slide 38

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 ;

}

Slide 39

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

Slide 40

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

Slide 41

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

Slide 42

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

Slide 43

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

Slide 44

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

Slide 45

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 .

Slide 46

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

Slide 47

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

Slide 48

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

Slide 49

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

Slide 50

F A S T E R

G R I D S

Slide 51

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

Slide 52

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

Slide 53

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 )

Slide 54

S T A T U S

Slide 55

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

Slide 56

C A N

U S E

G R I D ?

ὢ

Slide 57

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

Slide 58

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 /

Slide 59

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

b e t t e r w e b I g a l i a B l o o m b e r g

Slide 60

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 /