← All examples

Toolbar

justify-items / align-items (and per-item justify-self / align-self) align a grid item WITHIN its cell, on each axis independently. Default is stretch (fill the cell); any other value sizes the item to content and positions it. Here three items share a repeat(3, 1fr) row: one start, one centre, one end on the x-axis, all centred on the y-axis by align-items: a classic toolbar (logo left, title centred, actions right) from a single even grid.

Layout 470 × 76 <box><grid><text>

Result

Source examples/toolbar.svgn

<diagram width="470" height="76" padding="0" background="#eef1f4" theme="light">
  <!-- justify-items / align-items (and per-item justify-self / align-self) align a
       grid item WITHIN its cell, on each axis independently. Default is stretch
       (fill the cell); any other value sizes the item to content and positions it.
       Here three items share a repeat(3, 1fr) row: one start, one centre, one end
       on the x-axis, all centred on the y-axis by align-items: a classic toolbar
       (logo left, title centred, actions right) from a single even grid. -->
  <grid columns="repeat(3, 1fr)" width="470" height="76" align-items="center" padding="16" column-gap="12">
    <box justify-self="start" fill="#33415a" color="#ffffff" rx="6" padding="10">Logo</box>
    <text justify-self="center" font-weight="600" font-size="17">Dashboard</text>
    <box justify-self="end" fill="#4f6b9c" color="#ffffff" rx="6" padding="10">Sign in</box>
  </grid>
</diagram>

Open the SVG →