A presentation at BlinkOn 6 in in Munich, Germany by Manuel Rego Casasnovas
S T A T U S
O F C S S
G R I D
L A Y O U T I M P L E M E N T A T I O N 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 B l i n k O n
6
/
1 7
J u n e
2 0 1 6
( M u n i c h )
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
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
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
G R I D
T R A C K S
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
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
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
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
I M P L E M E N T A T I O N S T A T U S
G R I D
C O N T A I N E R S P r o p e r t y :
g r i d D O N E s u b g r i d T O D O
r i s k )
6 1 8 9 6 9
G R I D
s i z e :
a u t o D O N E
E X P L I C I T
G R I D
( I ) P r o p e r t i e s :
c o l u m n s | r o w s V a l u e s S t a t u s a u t o ,
l e n g t h ,
p e r c e n t a g e D O N E f l e x
( f r
c o n t e t ,
c o n t e n t ( ) T O D O
6 1 8 9 7 2
E X P L I C I T
G R I D
( I )
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 ;
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
E X P L I C I T
G R I D
( I I ) P r o p e r t i e s :
c o l u m n s | r o w s V a l u e s / F e a t u r e s S t a t u s r e p e a t ( i n t e g e r ,
f i l l ,
f i t ,
) W I P
M u l t i p l e
t r a c k s T O D O
5 8 9 4 6 0
6 1 9 9 3 0
E X P L I C I T
G R I D
( I I )
E X A M P L E A B C D E F . 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 ( 2 ,
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
" f "
F < / d i v
< / d i v
E X P L I C I T
G R I D
t e m p l a t e
s h o r t h a n d D O N E
E X P L I C I T
G R I D
( I I I )
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 ;
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
h e a d "
" n a v
m a i n "
" f o o t
f o o t " ;
} . a
{
a r e a :
h e a d ;
} . 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 ;
" 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
I M P L I C I T
G R I D
c o l u m n s | r o w s
m u l t i p l e t r a c k s T O D O
6 1 8 9 7 0
I M P L I C I T
G R I D
f l o w D O N E g r i d
s h o r t h a n d D O N E g r i d
s h o r t h a n d
n e w
s y n t a x T O D O
6 1 8 9 7 1
P L A C I N G
G R I D
I T E M S
( I ) P r o p e r t i e s :
s t a r t | e n d V a l u e s S t a t u s a u t o D O N E l i n e
n a m e D O N E s p a n D O N E
P L A C I N G
G R I D
I T E M S
c o l u m n | r o w s
a r e a
s h o r t h a n d D O N E P l a c e m e n t
a l g o r i t h m D O N E
P L A C I N G
G R I D
I T E M 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 :
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
A B S O L U T E
P O S I T I O N I N G F e a t u r e s S t a t u s P l a c e m e n t D O N E A l i g n m e n t T O D O
6 0 3 4 2 3
A B S O L U T E
P O S I T I O N I N G
0 p o s i t i o n :
c o l u m n :
1
/
r o w :
2
/
a u t o ; t o p :
8 0 p x ; b o t t o m :
6 0 p x ; l e f t : 9 0 p x ; r i g h t : 7 0 p x ;
g a p
g a p p e r c e n t a g e W I P
( a t
r i s k )
g a p
s h o r t h a n d D O N E
6 1 5 2 4 8
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
/
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
A L I G N M E N T
( I ) P r o p e r t i e s S t a t u s a u t o
c o n t e n t D O N E
A L I G N M E N T
( I )
E X A M P L E
( I ) 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 G N M E N T
( I )
E X A M P L E
( I I ) 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
A L I G N M E N T
( I I ) F e a t u r e s S t a t u s n o r m a l
v a l u e W I P
O v e r f l o w
a l i g n m e n t D O N E B a s e l i n e
a l i g n m e n t W I P
5 6 5 8 8 3
4 1 2 4 1 0
G R I D
S I Z I N G F e a t u r e s S t a t u s T r a c k
s i z i n g
a l g o r i t h m D O N E O r t h o g o n a l
f l o w s
s u p p o r t W I P
4 4 5 7 4 2
F R A G M E N T A T I O N F e a t u r e s S t a t u s F r a g m e n t a t i o n
a l g o r i t h m T O D O
6 1 4 6 6 7
S U B G R I D S
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
R E D U C E D
P R O P O S A L D I S P L A Y :
S U B G R I D ; T r a c k
s i z i n g
d e f i n i t i o n
f r o m
t h e
p a r e n t
g r i d ( n o
c o l u m n s | r o w s ) S u b g r i d s
h a v e
n o
i m p l i c i t
g r i d ( n o
a r e a
c a n
b e
u s e d
w i t h i n
t h e
s u b g r i d
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
{
c o l u m n :
1 ;
} < f o r m
< u l
< l i
< l a b e l
I n p u t < / 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
< i n p u t t y p e < l i
< b u t t o n
S u b m i t f o r m < / b u t t o n
< / l i < / u l
< / f o r m
P E R F O R M A N C E O p t i m i z a t i o n s
t o
a v o i d
l a y o u t
i n
s o m e
s i t u a t i o n s
W 3 C
T E S T
S U I T E C o m p l e t e
t h e
t e s t
s u i t e C u r r e n t l y
( m o s t
u n r e v i e w e d ) 1 1 7
t e s t s I m p o r t
t e s t
s u i t e
o n c e
i t ' s
r e a d y
C H R O M E
D E V T O O L S A d d
g r i d
l a y o u t
s u p p o r t I d e a s :
s h o w
g r i d
l i n e s ,
h i g h l i g h t
i t e m ' s
g r i d
a r e a ,
e t c .
D I S P L A Y :
C O N T E N T S ; A v o i d
b o x
g e n e r a t i o n U s e f u l
f o r
o t h e r
t h i n g s
( n o t
o n l y
G r i d
L a y o u t ) A l r e a d y
s u p p o r t e d
o n
F i r e f o x
S P E C
S T A T U S
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
g r i d / S t a r t e d
b y
M i c r o s o �
i n
2 0 1 0 L a s t
W o r k i n g
D r a �
1 9
M a y
2 0 1 6 W 3 C
T e s t
S u i t e
C A N
I
U S E
G R I D ?
ὢ
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 G e t t i n g
r e a d y ⚐ 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 V e r y
c l o s e
t o C h r o m e E n a b l e d
b y
d e f a u l t
o n
S a f a r i T e c h n o l o g y
P r e v i e w G e t t i n g
r e a d y
t o o ⚐ 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 X A M P L E 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 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
a
b e t t e r
w e b I g a l i a B l o o m b e r g
©
W a l d e m a r
M e r g e r
h t t p s : / / w w w . f l i c k r . c o m / p h o t o s / p a x x / 5 0 6 4 7 6 8 5 2 8 / 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 /
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.