Equal columns

Description

This grid splits the content into equal width columns. Each column will have a standard 1.5rem padding on left and right which will be removed on mobile.

Usage

Usage example

Variations

The variations are modifier classes that can be applied on the default element.

u-equal-columns

lays out children in two columns for tablets and above

u-equal-columns-extended

same as the above but adds 3rd column for desktop devices

u-equal-columns-horizontal

lays all children in one row in equally spaced columns for tablets and above

Code example

<div class="page-grid-examples">
  <div class="u-page-grid">
    <div class="u-equal-columns ">
      <div class="placeholder-component"></div>
      <div class="placeholder-component"></div>
      <div class="placeholder-component"></div>
      <div class="placeholder-component"></div>
      <div class="placeholder-component"></div>
      <div class="placeholder-component"></div>
    </div>
  </div>
</div>