CSS Grid Layout from the inside out

A presentation at HTML5DevConf Autumn 2015 in October 2015 in San Francisco, CA, USA by Manuel Rego Casasnovas

Slide 1

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

1 9

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 )

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

Slide 3

G R I D S

E V E R Y W H E R E

Slide 4

G R I D S

E V E R Y W H E R E

Slide 5

1 9 9 6

Slide 6

E V O L U T I O N

Slide 7

< T A B L E

😱

Slide 8

F L O A T 😰

Slide 9

D I S P L A Y :

I N L I N E

B L O C K ; ὣ

Slide 10

D I S P L A Y :

T A B L E ; ὢ�

Slide 11

C S S

F R A M E W O R K S ὠ

Slide 12

D I S P L A Y :

F L E X ; ὠ

Slide 13

D I S P L A Y :

G R I D ; ὠ

Slide 14

Slide 15

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 16

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 17

G R I D

T R A C K S

Slide 18

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 19

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 20

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 21

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 22

Slide 23

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 24

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 25

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 26

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 27

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 28

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

Slide 29

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 ;

g r i d

t e m p l a t e

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

Slide 30

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 31

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 32

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 33

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

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

{

a l i g n

s e l f :

;

j u s t i f y

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

Slide 34

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 0 0 p x

1 0 0 p x ;

a l i g n

c o n t e n t :

;

j u s t i f y

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

Slide 35

G R I D

G U T T E R S g r i d

r o w

g a p

g r i d

c o l u m n

g a p

Slide 36

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 ;

g r i d

r o w

g a p :

;

g r i d

c o l u m n

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

Slide 37

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 38

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 39

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 40

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 41

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 42

Slide 43

k e y w o r d s

f o r

A U T O

R E P E A T a u t o

f i l l a u t o

f i t r e p e a t ( )

Slide 44

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 ;

g r i d

t e m p l a t e

c o l u m n s :

r e p e a t ( a u t o

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

Slide 45

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

Slide 46

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 47

H O W

D O E S

I T

W O R K ?

Slide 48

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 49

E M P T Y

G R I D

Slide 50

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 :

2 ;

}

Slide 51

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 :

1 ;

}

Slide 52

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

{

g r i d

r o w :

2 ;

g r i d

c o l u m :

2 ;

}

Slide 53

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

{

g r i d

c o l u m :

3 ;

}

Slide 54

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

{

g r i d

c o l u m :

3 ;

}

Slide 55

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

Slide 56

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

Slide 57

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

Slide 58

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

Slide 59

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

Slide 60

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

Slide 61

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

Slide 62

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

Slide 63

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

Slide 64

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

Slide 65

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

Slide 66

F A S T E R

G R I D S

Slide 67

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

Slide 68

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 69

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

a u t o

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

Slide 70

H O R I Z O N T A L

N O N

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

a u t o

s i z e d i t e m s

i s

s l o w e r I t e m

Slide 71

S T A T U S

Slide 72

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 s : / / d r a f t s . c s s w g . o r 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

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

Slide 73

C A N

U S E

G R I D ?

ὢ

Slide 74

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 :

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 75

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 76

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 77

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 /