Columns

Multi-column layout

This container class sets up a multi-column layout with two, three, or four columns. It's content-agnostic, but not all Protocol components will work within a multi-column layout.

Column One

A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets.

Column Two

A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets.

<section
 class="mzp-l-content mzp-l-columns mzp-t-columns-two">
  <div>
    <h3>Column One</h3>
    <p>A peep at some distant orb has power to raise and
      purify our thoughts like a strain of sacred music, or
      a noble picture, or a passage from the grander poets.
    </p>
  </div>

  <div>
    <h3>Column Two</h3>
    <p>A peep at some distant orb has power to raise and
      purify our thoughts like a strain of sacred music, or
      a noble picture, or a passage from the grander poets.
    </p>
  </div>
</section>

Notes

  • A theme class sets the number of columns:
    • mzp-t-columns-two
    • mzp-t-columns-three
    • mzp-t-columns-four
  • Columns are evenly sized and evenly spaced. Every column in a group is the same width with the same gutters (space between columns).
  • We don't currently have options for an uneven distribution of columns, such as two columns in one-third/two-thirds proportions. If you need that kind of layout you'll need to use an alternative method.
  • This uses CSS grid, which is well supported in modern browsers but not supported in any browsers release prior to 2018. Older browsers will ignore the column layout and content will be linearized by default. If you need a multi-column layout in older browsers you'll need to use an alternative method.
  • The contents of each column should be in its own container element that must be a direct child of the multi-column container, as shown in the example. The kind of element doesn't matter (div, section, p, img, etc), it just needs to be a direct child of the container.
  • The .mzp-l-columns class doesn't apply a width; without any other constraints the column container will fill the width of its own container, which may be the browser window. Use this in conjunction with a .mzp-l-content container, either nested or applying both classes to the same container.
  • A column's width isn't explicit; the width of a column depends on the number of columns and the width of the container (which also varies).
  • Gutters between columns are 64px at most viewport sizes, but expand to 80px in extra large viewports.
  • Column layouts change automatically at different breakpoints, or in different container widths. See the demo.
    • Small viewports and containers are always a single column.
    • In medium viewports or containers, three columns will be a single column.
    • In medium viewports or containers, four columns will be two columns with the third and fourth wrapping under the first and second.

No-nos

  • Avoid nesting .mzp-l-columns containers. It gets weird.