Menu icon Foundation
Data Equalizer on item grid

I'm trying to get data equalizer to even out the heights on items in a grid. Items flow from three column on large to 2 column on medium to single on small.

As you can see in the screen shots, small doesn't matter as it's single column. On Medium and Large, the heights get all messed up and cause huge gaps in the floating elements.

Data equalizer is not working on the grid items. When I wrap three columns in a div and use data equalizer, it works but upon flowing to the Medium grid, I'm back to the same problem with uneven heights.

Any thoughts on how to solve this?

Screen shot 2014 05 14 at 10.45.45 am

Screen shot 2014 05 14 at 10.46.39 am

Screen shot 2014 05 14 at 10.46.50 am

<div class="grid-content" data-equalizer>
      
      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>One World, One Sky: Big Bird's Adventure</h6>
            <p>Travel to the Moon and stars with your friends from Sesame Street in our portable digital planetarium.</p>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/600/400" />
            <h5>Yes is it rocket science</h5>
            <p>Introduces participants to the history of rockets and Newton's laws of motion while engaging in the design and testing of their own rockets.</p>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>Distance Learning</h6>
            <p>The expanding role of robotics in space exploration.</p>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

    </div> <!-- end grid content -->

dataEqualizer

I'm trying to get data equalizer to even out the heights on items in a grid. Items flow from three column on large to 2 column on medium to single on small.

As you can see in the screen shots, small doesn't matter as it's single column. On Medium and Large, the heights get all messed up and cause huge gaps in the floating elements.

Data equalizer is not working on the grid items. When I wrap three columns in a div and use data equalizer, it works but upon flowing to the Medium grid, I'm back to the same problem with uneven heights.

Any thoughts on how to solve this?

Screen shot 2014 05 14 at 10.45.45 am

Screen shot 2014 05 14 at 10.46.39 am

Screen shot 2014 05 14 at 10.46.50 am

<div class="grid-content" data-equalizer>
      
      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>One World, One Sky: Big Bird's Adventure</h6>
            <p>Travel to the Moon and stars with your friends from Sesame Street in our portable digital planetarium.</p>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/600/400" />
            <h5>Yes is it rocket science</h5>
            <p>Introduces participants to the history of rockets and Newton's laws of motion while engaging in the design and testing of their own rockets.</p>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>Distance Learning</h6>
            <p>The expanding role of robotics in space exploration.</p>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

      <div class="grid-item-wrapper">
        <div class="item" data-equalizer-watch>
          <a href="#">
            <img src="http://placekitten.com/g/600/400" />
            <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
          </a>
        </div>
      </div>

    </div> <!-- end grid content -->
Brett Flroa about 5 years ago

This is my current solution. It doesn't equalize the heights but does keep the floats from stacking incorrectly. A partial fix

.grid-content {
  @include grid-row;

  @media #{$large-only}{
    & > .grid-item-wrapper:nth-child(3n+1){clear:both;}
  }

  @media #{$medium-only}{
    & > .grid-item-wrapper:nth-child(2n+1){clear:both;}
  }
}