Foundation Equalizer

We can add to the container elementdata-equalizerattributes, and add for each child elementdata-equalizer-watchAttribute to create an equalizer of the same height. The tallest element determines the height of the other elements.

Note:The equalizer requires JavaScript, so you need to initialize Foundation JS:

Example

<div class="row" data-equalizer>
  <div class="medium-4 columns panel" data-equalizer-watch>
    Lorem ipsum...
  </div>
  <div class="medium-4 columns panel" data-equalizer-watch>
    Sed ut...
  </div>
  <div class="medium-4 columns panel" data-equalizer-watch>
    Lorem ipsum...
  </div>
</div>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Try it Yourself »

an equalizer for different screens

On the equalizer, by addingdata-equalizer-mq="value"Attribute sets equal heights for different screen sizes. The value can be one of the following:

Value Description Example
medium-up Default.Creates equal-height containers with width greater than 40.063em
large-up Creates equal-height containers with width greater than 64.063em Try it Yourself
xlarge-up Creates equal-height containers with width greater than 90.063em Try it Yourself
xxlarge-up Creates equal-height containers with width greater than 120.063em Try it Yourself

Nested Content

isdata-equalizeranddata-equalizer-watchAttribute adds the same value. This connects them together to the equalizer container. Repeat multiple nested equalizers, ensuring they match:

Example

<!-- The Equalized Container -->
<div class="row" data-equalizer="first">
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
      <h3>Panel</h3>

      <!-- An Equalized Container Inside The Equalized Container -->
      <div class="row" data-equalizer="second">
        <div class="panel" data-equalizer-watch="second">
          <h3>Nested Panel</h3>
          <p>Lorem ipsum...</p>
        </div>
        <div class="panel" data-equalizer-watch="second">
          <h3>Nested Panel</h3>
          <p>Lorem ipsum...</p>
        </div>
        <div class="panel" data-equalizer-watch="second">
          <h3>Nested Panel</h3>
          <p>Lorem ipsum...</p>
        </div>
      </div>
      <!-- End Nested Equalized Container -->

    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
      <h3>Panel</h3>
      <p>Ut enim...</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
      <h3>Panel</h3>
      <p>Lorem ipsum....</p>
    </div>
  </div>
</div>

Try it Yourself »
other extensions