Bert Bos &
Eva Kasal | CSS3 in Style
Grid Template Layout – demo
●
●
●
●
●
●
From the demo:
body {
display grid: "aaaaa" /20em
"bcccc"
}
body::slot(a) {background: url(sea.jpg)}
body::slot(b) {background: black}
h2 { position flow: a }
ul.menu { position flow: b }
div.main { position flow: c }
(Template Layout
and Grid Layout drafts are being merged into
a Grid Template
Layout module.)
Grid Template Layout – principle
●
●
●
●
●
●
- Assign an invisible grid to an element →
grid
- For flowed elements:
- Combine grid cells into named slots
- Assign descendant elements to a slot →
flow
- For absolutely positioned elements:
- Use grid numbers instead of length units as coordinates →
grid-position
Grid Template Layout – grid
●
●
●
●
●
●
Grid Template Layout – CSS code
●
●
●
●
●
●
Either assign sizes to grid cells, or make them all the same
size:
body { grid:
"aabbbbcccdddddeeefff"
"aabbbbggghhhhheeefff"
"aaiii.ggghhhhheeefff"
"jjjjjkkkkhhhhhlllfff"
"jjjjjmmmmhhhhhlllfff"
"jjjjjnnnnnnnn.ooofff"
"pppppnnnnnnnn.ooofff" }
Grid Template Layout – sushi demo
●
●
●
●
●
●
body { grid: "a a c d"
"e e g g"
"i j k l" }
#maki { flow: a }
#sashimi { flow: i }
Note that the order can be easily changed:
#maki { flow: i }
#sashimi { flow: a }
Grid Template Layout – status
●
●
●
●
●
●
Note: they all implement different versions of the drafts!
