When you need to have boxes within a row all appear the same height regardless of the content, you can call this module on the row. The easiest way is to add a class of js-equal-height-row to an o-grid__row and it will automatically resize the grid boxes within the row to be the same height as the tallest one in the row.

The default component mixin automatically sets the height to 100%* of :only-children, so they will expand to fill the grid box.

* Actually, it sets the height to 100% - 20px, the default bottom margin on components

Use

var m = new EQUALHEIGHT({
  row: $('#some-grid-row')
});

Example

<div class="o-grid__row js-equal-height-row">
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/performance/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--book c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title">10th for research impact in the REF 2014</h3>
        <div class="c-key-fact__content">
          <p>Research performance</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/facilities/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--money c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title">&pound;500 million invested in facilities</h3>
        <div class="c-key-fact__content">
          <p>World-class resources available to staff and partners</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/graduate-school/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--graduation-cap c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title">York Graduate Research School</h3>
        <div class="c-key-fact__content">Supporting a community of over 2,000 research students
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
</div>

Example with images

The resize function fires again if the window changes size, and when any images inside the row have loaded (reload the page with Network throttling set to _3G_ in the Network conditions tab of Chrome Developer Tools).

<div class="o-grid__row o-grid__row--alt1 js-equal-height-row">
  <div class="o-grid__box o-grid__box--third">
    <a class="c-news c-news--excerpt" href="#">
      <figure class="c-news__poster">
        <img src="https://www.york.ac.uk/static/data/homepage/images/bog-axe-399.jpg" alt="Axe marks the spot">
      </figure>
      <h4 class="c-news__title">Axe marks the spot</h4>
      <div class="c-news__teaser">
        <p>Buried in a grave over 9,000 years ago, what can a stone adze tell us about the beliefs of our ancestors?</p>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a class="c-news c-news--excerpt" href="#">
      <figure class="c-news__poster">
        <img src="https://www.york.ac.uk/static/data/homepage/images/cyclone-pam-399.jpg" alt="In Pictures: Tackling contaminated waters in Vanuatu">
      </figure>
      <h4 class="c-news__title">In Pictures: Tackling contaminated waters in Vanuatu</h4>
      <div class="c-news__teaser">
        <p>We're working with rural communities in the South Pacific, developing sophisticated sensors which could save lives.</p>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a class="c-news c-news--excerpt" href="#">
      <figure class="c-news__poster">
        <img src="https://www.york.ac.uk/static/data/homepage/images/the-house-of-commons-1793-94-by-karl-anton-hickel-oil-on-canvas-1793-1795-credit-national-portrait-gallery-399.jpg" alt="The lost birthplace of political debate">
      </figure>
      <h4 class="c-news__title">The lost birthplace of political debate</h4>
      <div class="c-news__teaser">
        <p>As the tabloids call democracy into question, explore Parliament's architectural roots through digital technology.</p>
      </div>
    </a>

  </div>
</div>

Options

  • row - an o-grid__row-classed element. The script automatically parses for tables with the class .js-equal-height-row.