A presentation at PHP Vigo Meetup in in Vigo, Pontevedra, Spain by Manuel Rego Casasnovas
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
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 DS
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 T 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 :
;
} < d i v
" g r i d "
< d i v
" a "
A < / d i v
< d i v
" b "
B < / d i v
< d i v
" c "
C < / d i v
< d i v
" d "
D < / d i v
< / d i v
C O L O C A C I Ó N
DE
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
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
" g r i d "
< d i v
" a "
A < / d i v
< d i v
" b "
B < / d i v
< d i v
" c "
C < / d i v
< / d i v
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
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 ;
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
" g r i d "
< d i v
" a "
A < / d i v
< d i v
" b "
B < / d i v
< d i v
" c "
C < / d i v
< / d i v
Á R E A S
DE L
a r e a s
######### ## ## ## ## ######### ## ## ##
Á 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 ;
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 ;
} < d i v
" g r i d "
< d i v
" a "
A < / d i v
< d i v
" b "
B < / d i v
< d i v
" c "
C < / d i v
< 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 :
;
} < d i v
" g r i d "
< d i v
" a "
A < / d i v
< d i v
" b "
B < / d i v
< 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
a u t o
/
1 5 0 p x
a u t o ;
c o n t e n t :
;
c o n t e n t :
;
} < d i v
" g r i d "
< d i v
" a "
A < / d i v
< d i v
" b "
B < / d i v
< 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 :
;
} < d i v
" g r i d "
< d i v
" a "
A < / d i v
< d i v
" b "
B < / d i v
< d i v
" c "
C < / d i v
< d i v
" d "
D < / d i v
< 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 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
" 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
c o l u m n s
&
r o w 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 :
;
} < d i v
" g r i d "
< d i v
" a "
A < / d i v
< d i v
" b "
B < / d i v
< d i v
" c "
C < / d i v
< d i v
" d "
D < / d i v
< / d i v
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 ) ;
} < d i v
" g r i d "
< d i v
" a "
A < / d i v
< d i v
" b "
B < / d i v
< d i v
" c "
C < / d i v
< d i v
" d "
D < / d i v
< d i v
" e "
E < / d i v
< / d i v
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
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 ;
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
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 ;
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 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
F U T U R O
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
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
{
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
S U B G R I DS
¿ C Ó M O
F U N C I O N A N ?
E J E M P L O < d i v
" g r i d "
< d i v
" t i t l e "
T i t l e < / d i v
< d i v
" n a v "
N a v < / d i v
< d i v
" m a i n "
L o r e m
i p s u m . . . < / d i v
< d i v
" a s i d e "
A d < / d i v
< 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 ;
c o l u m n s :
2 0 0 p x
1 f r
a u t o ;
r o w s :
1 0 0 p x
a u t o ;
} . t i t l e
{
r o w :
1 ;
c o l u m n :
2 ;
} . n a v
{
r o w :
2 ;
c o l u m n :
1 ;
} . m a i n
{
r o w :
2 ;
c o l u m n :
2 ;
} . a s i d e
{
c o l u m n :
3 ;
}
G R I D V A C Í O
C O L O C A C I Ó N
DE
Í 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
DE
Í 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
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
{
r o w :
2 ;
c o l u m :
2 ;
}
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
{
c o l u m :
3 ;
}
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
{
c o l u m :
3 ;
}
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
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
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
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
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
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
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 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
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
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
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 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
¿ P U E DO
U S A R
G R I D?
�
N A V E G A DO R E S
� 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 :
p o l y f i l l
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 )
{
. . . }
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
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
¡ 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.