Foundation Laravel Package

title: Equalizer description: Equalizer makes it dead simple to give multiple items equal height. video: KbruAemirVQ js: js/foundation.equalizer.js

Basics

To set up an Equalizer group, you need a container, which gets the attribute data-equalizer, and then a series of child elements, which get the attribute data-equalizer-watch. The child elements will all be resized to have the same height.

<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>

Nesting

To use one Equalizer inside another, each container needs a unique ID, assigned with the data-equalizer attribute. Each data-equalizer-watch element should then have a value that matches its parent.

In the below example, the first set of Equalizer elements have the value foo, while the inside elements have the value bar. In the live example, we've also set the equalizeOn option to 'medium' for the parent elements, and the child Equalizer contained in the first div equalizes on stack, and maintains equal height.

<div class="grid-x" data-equalizer="foo">
  <div class="cell medium-4" data-equalizer-watch="foo">
    <div class="callout" data-equalizer-watch="foo" data-equalizer="bar">
      <h3>Parent panel</h3>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout panel" data-equalizer-watch="foo"></div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch="foo"></div>
  </div>
</div>

Equalize By Row

If you have a gallery of items that wrap multiple times, Equalizer can be configured to match each row's items in height. Works great with the block grid!

Watch this part in video

<div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
  <div class="cell" data-equalizer-watch></div>
  <div class="cell" data-equalizer-watch></div>
  <div class="cell" data-equalizer-watch></div>
  <!-- ... -->
</div>