A presentation at HTML5Spain Meetup by Manuel Rego Casasnovas
¡ C S S
G R I D
L A Y O U T 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 H T M L 5 S p a i n
/
2 8
J u n i o
2 0 1 6
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 G R I D S
P O R
T O D A S
P A R T E S
G R I D S
P O R
T O D A S
P A R T E S
1 9 9 6
H Å K O N
W I U M
L I E
( J U N I O ,
1 9 9 5 )
E V O L U C I Ó 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 ; ὠ
I N R O D U C C I Ó N
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
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
T R A C K S
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
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
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
Á R E A S T í t u l o C o n t e n i d o M e n ú P i e
S Y N T A X I S
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
T A M A Ñ O
D E
L O S
c o l u m n s
&
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 !
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 ;
c o l u m n s :
;
r o w s :
;
" g r i d "
" a "
A < / d i v
" b "
B < / d i v
" c "
C < / d i v
" d "
D < / d i v
< / d i v
C O L O C A C I Ó N
D E
c o l u m n
&
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
C O L O C A C I Ó N
D E
Í 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
{
" g r i d "
" a "
A < / d i v
" b "
B < / d i v
" c "
C < / d i v
< / d i v
L Í N E A S
D E 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
L Í N E A S
D E 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 ;
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 ] ;
" g r i d "
" a "
A < / d i v
" b "
B < / d i v
" c "
C < / d i v
< / d i v
Á R E A S
D E L
a r e a s
Á R E A S
D E L
G R I D 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 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
{
a r e a :
h e a d e r ;
} . 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 e r ;
" g r i d "
" a "
A < / d i v
" b "
B < / d i v
" c "
C < / d i v
" d "
D < / d i v
< / d i v
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 !
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 ;
i t e m s :
;
i t e m s :
;
} . b
{
s e l f :
;
s e l f :
;
" g r i d "
" a "
A < / d i v
" b "
B < / d i v
" c "
C < / d i v
< / d i v
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
1 0 0 p x
/
1 5 0 p x
1 5 0 p x ;
c o n t e n t :
;
c o n t e n t :
;
" g r i d "
" a "
A < / d i v
" b "
B < / d i v
" c "
C < / d i v
< / d i v
S E P A R A C I Ó N
E N T R E
g a p
&
g a p
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 a p :
;
g a p :
;
" g r i d "
" a "
A < / d i v
" b "
B < / d i v
" c "
C < / d i v
" d "
D < / d i v
" e "
E < / d i v
< / d i v
C O L O C A C I Ó N
f l o w
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 v i 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
" 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
R E P E A T ( )
A U T O M Á T I C O V a l o r e s
f i l l
&
f i t
p a r a
r e p e a t ( )
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 ;
c o l u m n s :
r e p e a t ( 3 ,
1 0 0 p x ) ;
r o w s :
r e p e a t ( 3 ,
1 0 0 p x ) ;
" g r i d "
" a "
A < / d i v
" b "
B < / d i v
" c "
C < / d i v
" d "
D < / d i v
" e "
E < / d i v
< / d i v
G R I D S
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
G R I D S
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 : 2 0 0 p x 1 f r / 1 0 0 p x 1 f r a u t o ; 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 f r / 1 0 0 p x 1 f r 1 0 0 p x a u t o ; 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 " ; } }
G R I D S
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
F U T U R O
S U B G R I D S 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
S U B G R I D S E t i q u e t a C h e c k b o x E n v i 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
{
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
< i n p u t
< / l i
< l i
< l a b e l
C h e c k b o x < / l a b e l
" c h e c k b o x "
< l i
< 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
< / l i
< / u l
< / f o r m
¿ C Ó M O
F U N C I O N A N ?
" g r i d "
" t i t l e "
T i t l e < / d i v
" n a v "
N a v < / d i v
" m a i n "
L o r e m i p s u m . . . < / d i v
" a s i d e "
A d < / d i v
" 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 ; }
G R I D
V A C Í O
C O L O C A C I Ó N
D E
Í T E M S T i t l e . t i t l e
{
r o w :
1 ;
c o l u m :
2 ;
}
C O L O C A C I Ó N
D E
Í 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 ;
}
C O L O C A C I Ó N
D E
Í 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 ;
}
C O L O C A C I Ó N
D E
Í 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 ;
}
C O L O C A C I Ó N
D E
Í 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 ;
}
C O L O C A C I Ó N
D E
Í 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
C O L U M N A
D E
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
C O L U M N A
B A S A D A
E N
C O N T E N I D O 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
C O L U M N A
B A S A D A
E N
C O N T E N I D 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 1 3 0 p x
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
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
H A C E R
L A Y O U T
D E
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
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
F I L A
B A S A D A
E N
E L
C O N T E N I D O 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
F I L A
B A S A D A
E N
E L
C O N T E N I D 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 1 6 0 p x
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
R E N D I M I E N T O
T R A C K S
F I J O S
V S
B A S A D O S
E N C O N T E N I D O 2 0 0 p x
e s
m á s
r á p i d o
q u e
a u t o
T R A C K S
B A S A D O S
E N
C O N T E N I D O
V S F L E X I B L E S a u t o
e s
m á s
r á p i d o
q u e
1 f r
E S T I R A R
V E R T I C A L M E N T E E l
e s t i r a d o
v e r t i c a l
( s t r e t c h )
e n
í t e m s
d e
t a m a ñ o a u t o m á t i c o
e s
m á s
l e n t o
q u e
l a s
o t r a s
o p c i o n e s
( e j .
s t a r t ) Í t e m
N O
E S T I R A R
H O R I Z O N T A L M E N T E E v i t a r
q u e
l o s
í t e m s
d e
t a m a ñ o
a u t o m á t i c o
s e
e s t i r e n h o r i z o n t a l m e n t e
( e . g .
s t a r t )
e s
m ́ a s
l e n t o Í t e m
E S T A D O
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
g r i d / L a
e m p e z ó
M i c r o s o �
e n
2 0 1 0 Ú l t i m o
W o r k i n g
D r a �
1 9
M a y o
2 0 1 6 W 3 C
T e s t
S u i t e
¿ P U E D O
U S A R
G R I D ?
ὢ
N A V E G A D O R E S
ὠ 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 C a s i
l i s t a ⚐ 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 C a s i
c o m o
C h r o m e A c t i v a d a
p o r
d e f e c t o
e n S a f a r i
T e c h n o l o g y
P r e v i e w C a s i
l i s t a
t a m b i é n ⚐ 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 J E M P L O 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 G R A D E 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
¡ 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 /
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.