Spanish: CSS Grid Layout: El futuro ya está aquí

A presentation at PHP Vigo Meetup in April 2017 in Vigo, Pontevedra, Spain by Manuel Rego Casasnovas

Slide 1

Slide 1

C S S

G R I D

L A Y O U T :

E L

F U T U R O

Y A

E S T Á A Q U Í 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 P H P V i g o

/

2 6

A b r i l

2 0 1 7

Slide 2

Slide 2

P R E S E N T A C I Ó N A c t u a l m e n t e

i m p l e m e n t a n d o

C S S

G r i d

L a y o u t ( 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 i e m b r o

d e

I g a l i a

Slide 3

Slide 3

G R I DS

P O R

T O D A S

P A R T E S

Slide 4

Slide 4

1 9 9 6

Slide 5

Slide 5

H Å K O N

W I U M

L I E

( J U N I O ,

1 9 9 5 )

Slide 6

Slide 6

E V O L U C I Ó N

Slide 7

Slide 7

< T A B L E

&#3627933233;

Slide 8

Slide 8

F L O A T &#3627933232;

Slide 9

Slide 9

D I S P L A Y :

I N L I N E

B L O C K ;

Slide 10

Slide 10

D I S P L A Y :

T A B L E ;

Slide 11

Slide 11

C S S

F R A M E W O R K S

Slide 12

Slide 12

D I S P L A Y :

F L E X ;

Slide 13

Slide 13

D I S P L A Y :

G R I D ; &#3627933189;

Slide 14

Slide 14

I N T R O D U C C I Ó N

Slide 15

Slide 15

C O N C E P T O S T í t u l o C o n t e n i d o M e n ú P i e

Slide 16

Slide 16

L Í N E A S T í t u l o C o n t e n i d o M e n ú P i e 1 2 3 1 2 3 4

Slide 17

Slide 17

T R A C K S

Slide 18

Slide 18

T R A C K S F I L A S T í t u l o C o n t e n i d o M e n ú P i e

Slide 19

Slide 19

T R A C K S C O L U M N A S T í t u l o C o n t e n i d o M e n ú P i e

Slide 20

Slide 20

C E L D A S T í t u l o C o n t e n i d o M e n ú P i e

Slide 21

Slide 21

Á R E A S T í t u l o C o n t e n i d o M e n ú P i e

Slide 22

Slide 22

S Y N T A X I S

Slide 23

Slide 23

D I S P L A Y :

G R I D ; R o m p e

e l

f l u j o

h a b i t u a l

d e

l a

p á g i n a

w e b

Slide 24

Slide 24

T A M A Ñ O

D E

L O S

T R A C K S ( F I L A S / C O L U M N A S ) 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 c i ó n

d e

c a j a s

d e s d e

C S S !

Slide 25

Slide 25

T A M A Ñ O

D E

L O S

T R A C K S 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

c l a s s

" g r i d "

< d i v

c l a s s

" a "

A < / d i v

< d i v

c l a s s

" b "

B < / d i v

< d i v

c l a s s

" c "

C < / d i v

< d i v

c l a s s

" d "

D < / d i v

< / d i v

Slide 26

Slide 26

C O L O C A C I Ó N

DE

Í T E M S g r i d

c o l u m n

&

g r i d

r o w O r d e n

d e l

D O M

≠

O r d e n

v i s u a l

Slide 27

Slide 27

C O L O C A C I Ó N

DE

Í T E M 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

1 0 0 p x

/

2 0 0 p x

2 0 0 p x ;

} . a

{

} < d i v

c l a s s

" g r i d "

< d i v

c l a s s

" a "

A < / d i v

< d i v

c l a s s

" b "

B < / d i v

< d i v

c l a s s

" c "

C < / d i v

< / d i v

Slide 28

Slide 28

L Í N E A S

DE L

G R I D C O N

N O M B R E U t i l i z a r

i d e n t i f i c a d o r e s

p e r s o n a l i z a d o s

p a r a

l a s

l í n e a s U n a

l í n e a

p u e d e

t e n e r

v a r i o s

n o m b r e s

Slide 29

Slide 29

L Í N E A S

DE L

G R I D C O N

N O M B R 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

c l a s s

" g r i d "

< d i v

c l a s s

" a "

A < / d i v

< d i v

c l a s s

" b "

B < / d i v

< d i v

c l a s s

" c "

C < / d i v

< / d i v

Slide 30

Slide 30

Á R E A S

DE L

G R I D g r i d

t e m p l a t e

a r e a s

###### ###### #### #### ### ########

## ## ## ## ## ## ## ## ## ## ##

## ## ## ## ## ## ## ## ##

## ###### ## ## ## ## ## ########

######### ## ## ## ## ######### ## ## ##

## ## ## ## ## ## ## ## ## ## ##

## ###### ###### #### #### ## ## ## ##

Slide 31

Slide 31

Á R E A S

DE L

G R I D 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 e r

h e a d e r "

" n a v

m a i n

"

" f o o t e r

f o o t e r " ;

} . a

{

g r i d

a r e a :

h e a d e r ;

} . 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 e r ;

} < d i v

c l a s s

" g r i d "

< d i v

c l a s s

" a "

A < / d i v

< d i v

c l a s s

" b "

B < / d i v

< d i v

c l a s s

" c "

C < / d i v

< d i v

c l a s s

" d "

D < / d i v

< / d i v

Slide 32

Slide 32

A L I N E A R

Y

J U S T I F I C A R E s p e c i f i c a c i ó n

C S S

B o x

A l i g n m e n t ¡ C e n t r a d o

h o r i z o n t a l

&

v e r t i c a l !

Slide 33

Slide 33

A L I N E A R

Y

J U S T I F I C A R

Í T E M 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

1 0 0 p x

/

2 0 0 p x

2 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

c l a s s

" g r i d "

< d i v

c l a s s

" a "

A < / d i v

< d i v

c l a s s

" b "

B < / d i v

< d i v

c l a s s

" c "

C < / d i v

< / d i v

Slide 34

Slide 34

A L I N E A R

Y

J U S T I F I C A R

T R A C K 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

a u t o

/

1 5 0 p x

a u t o ;

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

c l a s s

" g r i d "

< d i v

c l a s s

" a "

A < / d i v

< d i v

c l a s s

" b "

B < / d i v

< d i v

c l a s s

" c "

C < / d i v

< / d i v

Slide 35

Slide 35

S E P A R A C I Ó N

E N T R E

T R A C K 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

Slide 36

S E P A R A C I Ó N

E N T R E

T R A C K S 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 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

c l a s s

" g r i d "

< d i v

c l a s s

" a "

A < / d i v

< d i v

c l a s s

" b "

B < / d i v

< d i v

c l a s s

" c "

C < / d i v

< d i v

c l a s s

" d "

D < / d i v

< d i v

c l a s s

" e "

E < / d i v

< / d i v

Slide 37

Slide 37

C O L O C A C I Ó N

A U T O M Á T I C A g r i d

a u t o

f l o w

Slide 38

Slide 38

C O L O C A C I Ó N

A U T O M Á T I C A E t i q u e t a C h e c k b o x E n vi a r

f o r m u l a r i o f o r m

{

} l a b e l

{

} i n p u t

{

} < f o r m

< l a b e l

E t i q u e t a < / l a b e l

< i n p u t

< l a b e l

C h e c k b o x < / l a b e l

< i n p u t

t y p e

" c h e c k b o x "

< b u t t o n

E n v i a r

f o r m u l a r i o < / b u t t o n

< / f o r m

Slide 39

Slide 39

G R I D I M P L Í C I T O g r i d

a u t o

c o l u m n s

&

g r i d

a u t o

r o w s 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 :

;

g r i d

a u t o

r o w s :

;

} < d i v

c l a s s

" g r i d "

< d i v

c l a s s

" a "

A < / d i v

< d i v

c l a s s

" b "

B < / d i v

< d i v

c l a s s

" c "

C < / d i v

< d i v

c l a s s

" d "

D < / d i v

< / d i v

Slide 40

Slide 40

R E P E A T ( )

A U T O M Á T I C O V a l o r e s

a u t o

f i l l

&

a u t o

f i t

p a r a

r e p e a t ( )

Slide 41

Slide 41

R E P E A T ( )

A U T O M Á T I C O A B C D 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 ( 3 ,

1 0 0 p x ) ;

g r i d

t e m p l a t e

r o w s :

r e p e a t ( 3 ,

1 0 0 p x ) ;

} < d i v

c l a s s

" g r i d "

< d i v

c l a s s

" a "

A < / d i v

< d i v

c l a s s

" b "

B < / d i v

< d i v

c l a s s

" c "

C < / d i v

< d i v

c l a s s

" d "

D < / d i v

< d i v

c l a s s

" e "

E < / d i v

< / d i v

Slide 42

Slide 42

G R I DS

A D A P T A T I V O S

( R E S P O N S I V E ) E l

t a m a ñ o

d e

l o s

t r a c k s

p u e d e

s e r

f l e x i b l e M e d i a

Q u e r i e s

Slide 43

Slide 43

G R I DS

A D A P T A T I V O S

( R E S P O N S I V 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 f r

a u t o

/

2 0 0 p x

1 f r ;

g r i d

t e m p l a t e

a r e a s :

" h e a d e r

h e a d e r "

" m e n u

m a i n

"

" m e n u

f o o t e r " ; } @ m e d i a

( m a x

w i d t h :

4 0 0 p x )

{

. g r i d

{

g r i d :

1 0 0 p x

1 f r

1 0 0 p x

a u t o

/

1 f r ;

g r i d

t e m p l a t e

a r e a s :

" h e a d e r "

" m a i n

"

" m e n u

"

" f o o t e r " ;

} }

Slide 44

Slide 44

G R I DS

A D A P T A T I V O S

( R E S P O N S I V E ) T í t u l o C o n t e n i d o M e n ú P i e

Slide 45

Slide 45

F U T U R O

Slide 46

Slide 46

S U B G R I DS G r i d

A n i d a d o 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 47

Slide 47

S U B G R I DS E t i q u e t a C h e c k b o x E n vi a r

f o r m u l a r i o 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

< l i

< l a b e l

E t i q u e t a < / l a b e l

< l i

< l a b e l

C h e c k b o x < / l a b e l

< l i

< b u t t o n

E n v i a r

f o r m u l a r i o < / u l

< / f o r m

Slide 48

Slide 48

S U B G R I DS

Slide 49

Slide 49

¿ C Ó M O

F U N C I O N A N ?

Slide 50

Slide 50

E J E M P L O < d i v

c l a s s

" g r i d "

< d i v

c l a s s

" t i t l e "

T i t l e < / d i v

< d i v

c l a s s

" n a v "

N a v < / d i v

< d i v

c l a s s

" m a i n "

L o r e m

i p s u m . . . < / d i v

< d i v

c l a s s

" a s i d e "

A d < / d i v

< d i v

c l a s s

" a s i d e "

A d w o r d < / d i v

< / d i v

. g r i d

{

d i s p l a y :

g r i d ;

w i d t h :

8 0 0 p x ;

g r i d

t e m p l a t e

c o l u m n s :

2 0 0 p x

1 f r

a u t o ;

g r i d

t e m p l a t e

r o w s :

1 0 0 p x

a u t o ;

} . t i t l e

{

g r i d

r o w :

1 ;

g r i d

c o l u m n :

2 ;

} . n a v

{

g r i d

r o w :

2 ;

g r i d

c o l u m n :

1 ;

} . m a i n

{

g r i d

r o w :

2 ;

g r i d

c o l u m n :

2 ;

} . a s i d e

{

g r i d

c o l u m n :

3 ;

}

Slide 51

Slide 51

G R I D V A C Í O

Slide 52

Slide 52

C O L O C A C I Ó N

DE

Í 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 53

Slide 53

C O L O C A C I Ó N

DE

Í 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 54

Slide 54

C O L O C A C I Ó N

DE

Í 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 55

Slide 55

C O L O C A C I Ó N

DE

Í 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 56

Slide 56

C O L O C A C I Ó N

DE

Í 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 57

Slide 57

C O L O C A C I Ó N

DE

Í 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 58

Slide 58

C O L U M N A

DE

T A M A Ñ O

F I J O 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 59

Slide 59

C O L U M N A

B A S A D A

E N

C O N T E N I DO 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 60

Slide 60

C O L U M N A

B A S A D A

E N

C O N T E N I DO 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 61

Slide 61

C O L U M N A

F L E X I B L E 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 62

Slide 62

C O L U M N A

F L E X I B L E 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 63

Slide 63

H A C E R

L A Y O U T

DE

L O S

Í 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 64

Slide 64

F I L A

C O N

T A M A Ñ O

F I J O 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 65

Slide 65

F I L A

B A S A D A

E N

E L

C O N T E N I DO 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 66

Slide 66

F I L A

B A S A D A

E N

E L

C O N T E N I DO 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 67

Slide 67

E S T I R A R

Í 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 68

Slide 68

E S T A D O

Slide 69

Slide 69

E S P E C I F I C A C I Ó N

W 3 C C S S

G r i d

L a y o u t

h t t p s : / / d r a � s . c s s w g . o r g / c s s

g r i d / L a

e m p e z ó

M i c r o s o �

e n

2 0 1 0 C a n d i d a t e

R e c o m m e n d a t i o n

9

F e b r e r o

2 0 1 7 W 3 C

T e s t

S u i t e

Slide 70

Slide 70

¿ P U E DO

U S A R

G R I D?

&#3627933188;

Slide 71

Slide 71

N A V E G A DO R E S

&#3627933187; V e r s i ó n

5 7 M a r z o

2 0 1 7 V e r s i ó n

1 0 . 1 M a r z o

2 0 1 7 V e r s i ó n

5 2 M a r z o

2 0 1 7 I m p l e m e n t a c i ó n

a n t i g u a

d e s d e

I E

1 0 .

C o n

p r e f i j o :

m s 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 72

Slide 72

DE S DE

A H O R A

M I S M O P r o g r e s s i v e

E n h a n c e m e n t @ s u p p o r t s

e s

t u

a m i g o @ s u p p o r t s

( d i s p l a y :

g r i d )

{

. . . } @ s u p p o r t s

n o t

( d i s p l a y :

g r i d )

{

. . . }

Slide 73

Slide 73

R E C U R S O S

&

b y R a c h e l

A n d r e w

b y

J e n

S i m m o n s M o z i l l a

D e v e l o p e r

N e t w o r k

( M D N ) g r i d b y e x a m p l e . c o m C S S

G r i d

A s k

M e

A n y t h i n g

( A M A ) l a b s . j e n s i m m o n s . c o m

Slide 74

Slide 74

A G R A DE C I M I E N T O S

y

t r a b a j a n d o

j u n t o s

p o r

m e j o r a r

l a

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

Slide 75

Slide 75

¡ G R A C I A S ! T w i t t e r :

C o r r e o :

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 /