← All examples

Masthead

Negative grid lines count from the end: line -1 is the last line, so grid-column="1 / -1" spans every column whatever the count. Here the header and footer go full-bleed over a 3-column grid without naming areas; the three tiles auto-flow into the row between them. (Negatives resolve against the track count: columns always know it; row negatives use the rows list.)

Layout 380 × 196 <box><grid>

Result

Source examples/masthead.svgn

<diagram width="380" padding="16" background="#fbfbfb" theme="light">
  <!-- Negative grid lines count from the end: line -1 is the last line, so
       grid-column="1 / -1" spans every column whatever the count. Here the header
       and footer go full-bleed over a 3-column grid without naming areas; the
       three tiles auto-flow into the row between them. (Negatives resolve against
       the track count: columns always know it; row negatives use the `rows` list.) -->
  <grid columns="repeat(3, 1fr)" rows="auto 64 auto" gap="10">
    <box grid-column="1 / -1" fill="#33415a" color="#ffffff" rx="8" text-align="left"
         padding="14">Masthead (grid-column 1 / -1)</box>
    <box fill="#dce8d6" rx="8">One</box>
    <box fill="#f2ddd7" rx="8">Two</box>
    <box fill="#e9e6f2" rx="8">Three</box>
    <box grid-column="1 / -1" grid-row="3" fill="#dce4ec" color="#5a6472"
         rx="8">Footer spans every column too</box>
  </grid>
</diagram>

Open the SVG →