Bert Bos & Eva Kasal | CSS3 in Style
Demo: template
From the demo:
body {displaygrid: "aaaaa" /20em "bcccc" } body::slot(a) {background: url(sea.jpg)} body::slot(b) {background: black} h2 {positionflow: a } ul.menu {positionflow: b } div.main {positionflow: c }
(Template Layout and Grid Layout drafts are being merged into a Grid Template Layout module.)
grid
flow
grid-position
Photo of an information panel in a museum, and the same overlaid with the implied grid.
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" }
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 }
Note: they all implement different versions of the drafts!