Bert Bos & Eva Kasal | CSS3 in Style

Grid Template Layout – demo

From the demo:

body {
  display grid: "aaaaa" /20em
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

Grid Template Layout – grid

A large information panel
     with text and photos that I found in a museumclearly has a number of
     implied horizontal and vertical lines to which the text and
     photos are aligned.

Photo of an information panel in a museum, and the same overlaid with the implied grid.

Grid Template Layout – CSS code

Either assign sizes to grid cells, or make them all the same size:

body { grid:
  "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!