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

10th for research impact in the REF 2014

Research performance

Learn more

£500 million invested in facilities

World-class resources available to staff and partners

Learn more

York Graduate Research School

Supporting a community of over 2,000 research students

Learn more

 
<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).

Axe marks the spot

Axe marks the spot

Buried in a grave over 9,000 years ago, what can a stone adze tell us about the beliefs of our ancestors?
In Pictures: Tackling contaminated waters in Vanuatu

In Pictures: Tackling contaminated waters in Vanuatu

We're working with rural communities in the South Pacific, developing sophisticated sensors which could save lives.
The lost birthplace of political debate

The lost birthplace of political debate

As the tabloids call democracy into question, explore Parliament's architectural roots through digital technology.

 
<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.