Even Columns

.even-columns Layout

What it does

The .even-columns class creates a flexible grid layout where child elements are spaced evenly.

• On all screens:
  • Uses CSS Grid for layout
  • Sets the gap between items using the --grid-gap CSS variable (defaults to your $spacing-6 Sass variable)
• On medium screens and up (@include mq(md)):
  • Switches to a horizontal (row) layout
  • Each child gets equal width (1fr), so all columns are the same size

How to use

1. Add the class to a container:

   <div class="even-columns">
     <div>Column 1</div>
     <div>Column 2</div>
     <div>Column 3</div>
   </div>
   

2. Customize the gap (optional):

   <div class="even-columns" style="--grid-gap: 2rem;">
     <!-- columns -->
   </div>
   

Example

<div class="even-columns">
  <div>Feature A</div>
  <div>Feature B</div>
  <div>Feature C</div>
</div>

Result:

• On small screens, columns stack vertically with a gap.
• On medium and larger screens, columns are displayed side by side, each taking up equal space, with a customizable gap between them.

HTML Code (Demo)

<div class="even-columns">
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
</div>

Configuration

{
  "headline": "Even Columns"
}