cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <header>
  <h1>Match individual element heights along a CSS grid row</h1>
  <p>The image, heading and copy elements in each grid-item have their height dynamically adjusted across each grid row.<br>
    When the number of cells in a row changes (responsively or by design) the min-height is recalculated.<br>
    Maintaining an even layout across each horizontal row.</p>
</header>

<section>
  <div class=instructions>
    <div><b>&larr;</b> C&rsquo;mon and squeeze me! <b>&rarr;</b></div>
</section>

<section class=grid_parent>

  <!--
Amend class name to the maximum columns required.
Options:
grid-2, grid-3, grid-2_4, grid-2_3_6, grid-2_3_4_6
-->

  <div class=grid-2_3_4_6>

    <div class=grid_item>

      <div class=stmp>
        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/kellys.png" alt="Kelly’s of Cornwall">
        </div>

        <h2 class=stmp_ttl data-matchheights>Kelly’s of Cornwall Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 3 Cornish beach retreats</p>

        <a class=cta->
          <span class=cta_lbl><span class=visually-hidden>Kelly’s</span> Winners coming soon</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Kelly’s</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>

    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/haagen-dazs.png" alt="Häagen-Dazs - everyday made extraordinary">
        </div>

        <h2 class=stmp_ttl data-matchheights>Häagen-Dazs Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win an exclusive training session with tennis ace Grigor Dimitrov</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Häagen-Dazs</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Häagen-Dazs</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>

    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/heinz.png" alt="Heinz">
        </div>

        <h2 class=stmp_ttl data-matchheights>Heinz Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win a holiday to any country playing in the 2018 football tournament</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Heinz</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Heinz</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>

    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/orangina.png" alt="Orangina">
        </div>

        <h2 class=stmp_ttl data-matchheights>Orangina Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 100 Sunglass Hut vouchers worth £250</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Orangina</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Orangina</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/pepsi.png" alt="Coca-Cola">
        </div>

        <h2 class=stmp_ttl data-matchheights>Coca-Cola Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 10 PS4 and FIFA 18 gaming bundles</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Coca-Cola</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Coca-Cola</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>
        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/pringles.png" alt="Pringles">
        </div>

        <h2 class=stmp_ttl data-matchheights>Pringles Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win a training session with Rio Ferdinand and a coach for you and 10 friends</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Pringles</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Pringles</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/elmlea.png" alt="Elmlea">
        </div>

        <h2 class=stmp_ttl data-matchheights>Elmlea Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 20 Xbox&reg; One X consoles and a compatible Xbox&reg; game</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Elmlea</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Elmlea</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/veet.png" alt="Veet">
        </div>

        <h2 class=stmp_ttl data-matchheights>Mamma Mia! and Veet Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win a holiday to Greece with a private Mamma Mia! tour</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Mamma Mia! and Veet</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Mamma Mia! and Veet</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/mccoys.png" alt="McCoy&rsquo;s">
        </div>

        <h2 class=stmp_ttl data-matchheights>McCoy&rsquo;s Win Lunch: Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 10 Tesco lunches for a year or 1 of 500 Tesco lunches for a week</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>McCoy&rsquo;s</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>McCoy&rsquo;s</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/heineken.png" alt="Heineken">
        </div>

        <h2 class=stmp_ttl data-matchheights>Heineken Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Silverstone grandstand tickets to be won every day, plus 1000s of runner-up prizes</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Heineken</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Heineken</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/lego-disney.png" alt="LEGO Disney">
        </div>

        <h2 class=stmp_ttl data-matchheights>LEGO Disney Princess Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win a holiday to Disneyland Paris with a LEGO Disney Princess carriage experience</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>LEGO Disney Princess</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>LEGO Disney Princess</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/robinsons.png" alt="Robinsons - real fruit in every drop">
        </div>

        <h2 class=stmp_ttl data-matchheights>Robinsons Wimbledon Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 2 pairs of VIP hospitality tickets to Wimbledon Ladies&rsquo; Finals Day</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Robinsons</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Robinsons</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/nescafe.png" alt="Nescafé Gold">
        </div>

        <h2 class=stmp_ttl data-matchheights>Nescafé Gold Blend Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 200 Tesco gift cards worth £100</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Nescafé</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Nescafé</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/mars.png" alt="Mars">
        </div>

        <h2 class=stmp_ttl data-matchheights>Mars Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 10 Sony Home Cinema Systems and TVs</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Mars</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Mars</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/cadbury.png" alt="Cadbury">
        </div>

        <h2 class=stmp_ttl data-matchheights>Cadbury Text to Win</h2>
        <p class=stmp_cpy data-matchheights>1 lucky winner will present the Premier League Golden Boot Award 2017–2018</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Cadbury</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Cadbury</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>


    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/mcvities.png" alt="McVitie&rsquo;s">
        </div>

        <h2 class=stmp_ttl data-matchheights>McVitie&rsquo;s Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 10 round-the-world trips</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>McVitie&rsquo;s</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>McVitie&rsquo;s</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>



    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/baby-dove.png" alt="Baby Dove">
        </div>

        <h2 class=stmp_ttl data-matchheights>Baby Dove Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win a &lsquo;dream nursery&rsquo;</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Baby Dove</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Baby Dove</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>



    <div class=grid_item>

      <div class=stmp>
        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/neutrogena.png" alt="Neutrogena">
        </div>

        <h2 class=stmp_ttl data-matchheights>Neutrogena Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win a luxury spa weekend for 2</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Neutrogena</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Neutrogena</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>



    <div class=grid_item>

      <div class=stmp>
        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/walkers.png" alt="Walkers">
        </div>

        <h2 class=stmp_ttl data-matchheights>Walkers Sensations Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win a 2-night trip to Veneto, Italy for 2 adults</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Walkers Sensations</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Walkers Sensations</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>



    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/pringles.png" alt="Pringles">
        </div>

        <h2 class=stmp_ttl data-matchheights>Pringles Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 21 easyJet holiday vouchers worth £400</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Pringles</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Pringles</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>



    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/skyr.png" alt="Arla Skyr">
        </div>

        <h2 class=stmp_ttl data-matchheights>Skyr Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win a 3-night holiday to Iceland for 2 adults</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Skyr</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Skyr</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>



    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/lynx.png" alt="Lynx">
        </div>

        <h2 class=stmp_ttl data-matchheights>Lynx Buy Scan Win Prize Draw</h2>
        <p class=stmp_cpy data-matchheights>Win a tech bundle and signed Anthony Joshua snapback cap</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Lynx</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Lynx</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>



    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/oreo.png" alt="Oreo">
        </div>

        <h2 class=stmp_ttl data-matchheights>Oreo Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win 1 of 2 Samsung Galaxy Note8 tablets, with runner-up prizes of a Google Home</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Oreo</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Oreo</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>



    <div class=grid_item>
      <div class=stmp>

        <div class=stmp_ingCnt data-matchHeights>
          <img class=stmp_img src="https://websemantics.uk/pens/css-grid-match-element-heights/i/lucozade.png" alt="Lucozade Energy">
        </div>

        <h2 class=stmp_ttl data-matchheights>Lucozade Energy Text to Win</h2>
        <p class=stmp_cpy data-matchheights>Win a 5-night trip to Cape Town, South Africa, for 4 people</p>

        <a class=cta- href>
          <span class=cta_lbl><span class=visually-hidden>Lucozade</span> Winners list</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

        <a class=cta-invert href>
          <span class=cta_lbl><span class=visually-hidden>Lucozade</span> Terms and conditions</span>
          <svg class=cta_svg aria-hidden=true><use xlink:href="#icon-cta"></use></svg>
        </a>

      </div>
    </div>

    <!-- Repeat .grid_items -->

  </div>
</section>


<!--
<style id=IE_grid_styles>

/* IE styles - fallback for grid */

  [class^="grid-2"] {
    width: 296px;
    margin: 0 auto;
  }

  @media (min-width: 634px) { /* 634px - 2 column */
    [class^="grid-2"] {
      width: 610px;
      margin: 0 auto;
    }
  }
  @media (min-width: 48em) { /* 768px */
    [class^="grid-2"] {
      width: 618px;
    }
  }
  @media (min-width: 952px) { /* 952px - 3 column */
    [class^="grid-2"] {
      width: 930px;
    }
  }
  @media (min-width: 1264px) { /* 1264px - 4 columns */
    [class^="grid-2"] {
      width: auto;
    }
  }


  [class^="grid_item"] {
    margin: 0 auto .75rem;
    width: 296px;
  }
  @media (min-width: 39.625em) { /* 634px - 2 column */
    [class^="grid_item"] {
      display: inline-block;
      margin-right: .75rem;
    }
    [class^="grid_item"]:nth-child(2n) {
      margin-right: 0;
    }
  }
  @media (min-width: 48em) { /* 768px */
    [class^="grid_item"] {
      display: inline-block;
      margin: 0 1rem 1rem 0;
    }
  }
  @media (min-width: 59.5em) { /* 952px - 3 column */
    [class^="grid_item"]:nth-child(2n) {
      margin-right: 1rem;
    }
    [class^="grid_item"]:nth-child(3n) {
      margin-right: 0;
    }
  }
  @media (min-width: 79em) { /* 1264px - 4 columns */
    [class^="grid_item"]:nth-child(3n) {
      margin-right: 1rem;
    }
    [class^="grid_item"]:nth-child(4n) {
      margin-right: 0;
    }
  }
</style>
-->



<svg style="display:none" id=template_definitions_brand>
  <defs>

    <symbol viewBox="0 0 18 24" id="icon-cta">
      <path style="stroke-width:1.5;fill:none;stroke:currentColor" d="M5.31 3.35L14.28 12l-8.97 8.64"></path>
    </symbol>

    </defs>
</svg>


[[[https://codepen.io/2kool2/pen/mKeeGM]]]
            
          
!
            
              html {box-sizing: border-box;}
*,
*::before,
*::after {box-sizing: inherit;}
body {
  margin: 0;
  color: #666;
  font-family: sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: hsl(269,19%,30%);
  background-color: hsla(32,100%,85%,.35);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4'/%3E%3C/filter%3E%3C/defs%3E%3C!-- %3Cpath filter='url(%23a)' opacity='.3' d='M0 0h1200v256H0z'/%3E--%3E%3Crect filter='url(%23a)' opacity='.3' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
::-moz-selection {
  color: #fff;
  background-color: #000;
}
::selection {
  color: #fff;
  background-color: #000;
}
header {margin: .75rem;}
@media (min-width: 48em) {
  header {margin: 1rem;}
}
h1 {
  font-weight: 100;
  line-height: 1.3;
  text-align: center;
  margin-top: 2rem;
}
h1 + p {
  text-align: center;
  max-width: 34rem;
  margin: 1rem auto;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
  
  


@supports (display: grid) {

  /* Grid spacing - Browser which support CSS grid also support variables */
  [class^="grid_parent"] {
    --spacing: 0.75rem;
    padding: var(--spacing);
  }
  @media (min-width: 48em) { /* 768px */
    [class^="grid_parent"] {
      --spacing: 1rem;
    }
  }

  /* The grid */
  /* See:  https://codepen.io/2kool2/pen/aVXbbV */
  [class^="grid-"] {
    --columns: 1;
    display: grid;
    grid-gap: calc(var(--spacing) * 2) var(--spacing);
    grid-template-columns: var(--columns);
  }
  @media (min-width: 39.25em) { /* 628px - 2 column (296px grid item, 12px spacing) */
    [class^="grid-2"] {
      grid-gap: var(--spacing);
      --columns: 1fr 1fr;
    }
  }
  @media (min-width: 59.5em) { /* 952px - 3 column (296px grid item, 16px spacing) */
    [class^="grid-3"],
    [class^="grid-2_3"] {
      --columns: 1fr 1fr 1fr;
    }
  }
  @media (min-width: 79em) { /* 1264px - 4 columns (296px grid item, 16px spacing) */
    [class^="grid-2_4"],
    [class^="grid-2_3_4"] {
      --columns: 1fr 1fr 1fr 1fr;
    }
  }
  @media (min-width: 118em) { /* 1888px - 6 columns (296px grid item, 16px spacing) */
    [class^="grid-2_4_6"],
    [class^="grid-2_3_6"],
    [class^="grid-2_3_4_6"] {
      --columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
  }

  /* Grid item */
  [class^="grid_item"] {
    /* Required, but may be changed */
    min-width: calc(20rem - var(--spacing) * 2);
  }

} /* @supports grid */




  
  
.stmp {
  text-align: center;
  padding: var(--spacing);
  background-color: hsla(0, 0%, 100%, .4);
}
.stmp > *+* { /* Add margin-top to each sibling except the first */
  margin: var(--spacing) 0 0;
}
.stmp_ingCnt {
  /* Centre the image vertically - See: https://codepen.io/2kool2/pen/zdMMJx */
  height: 100%; /* Unit irrelevant */
  display: flex; /* Collapses box */
  align-items: center;
  justify-content: center;
}
.stmp_img {
  display: block;
  width: 264px;
  margin: 0 auto var(--spacing);
}
.stmp_ttl {
  font-size: 1.5rem;
  line-height: 1.2;
}
.stmp_cpy {
  font-size: 1.125rem;
  color: #666;
}
.cta-invert {
  font-weight: 500;
  margin-left: var(--spacing);
}
@media (min-width: 39.25em) {
  [class^="cta-invert"] {
    margin-left: 0;
  }
}





/* Tesco CTA - unopinionated */
[class^="cta-"] {
  /* cta properties very rarely change */
  position: relative;
  padding: 11.5px 2rem 7.5px 1rem;
  display: inline-block;
  font: 700 1rem/1 sans-serif;
  border: 2px solid transparent;
  border-radius: 100px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  outline: 0 solid transparent;
  white-space: nowrap;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
}
button[class^="cta-"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}
[class^="cta-"]:focus {
  outline: 0 solid transparent;
}

[class^="cta_lbl"] {
  display: inline-block;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color .3s ease-out;
}

a[href]:hover [class^="cta_lbl"],
a[href]:focus [class^="cta_lbl"],
button:hover [class^="cta_lbl"],
button:focus [class^="cta_lbl"] {
  border-bottom-color: currentColor;
}

[class^="cta_svg"] {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  fill: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Tesco CTA - Opinionation */

[class^="cta_cnt"] {
  text-align: center;
}
[class^="cta-"] {
  min-width: 13em;
}

.cta- {
  color: #fff;
  background-color: #00539f;
}
.cta-invert,
.cta-invert:hover,
.cta-invert:focus {
  background-color: #fff;
  color: #00539f;
  border-color: #00539f;
}
[class^="cta-"]:hover,
[class^="cta-"]:focus {
  box-shadow: 0 0 0 4px #99BAD9;
}

/* Without a href the link is effectively disabled */

a[class^="cta-"]:not([href]) { 
  background-color: #ccc; /* Poor colour contrast */
  color: #fff;
  padding-right: 1rem;
}
a[class^="cta-"]:not([href]):hover {
  box-shadow: 0 0 0 4px transparent;
}
a[class^="cta-"]:not([href]) .cta_svg {
  display:none;
}





/* C’mon and squeeze me! */
.instructions {
  --letterSpace: 0;
  --fontSize: 1rem;
  overflow: hidden;
  text-align: center;
  font-size: var(--fontSize);
  background-color: hsla(269,19%,30%,.1);
}
@media (min-width:34em) {
  .instructions {
    --letterSpace: 0.02em;
    --fontSize: 1.5rem;
  }
}
.instructions div {
  transform: scale(0.75, 1);
  letter-spacing: -0.02em;
  animation: scaleArrow 5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
.instructions b {
  display: inline-block;
  opacity: .5;
  font-size: 2em;
  font-weight: 700;
  vertical-align: sub;
  transform: scale(.8, .75);
  animation: scaleArrow 5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes scaleArrow {
  50% {
    transform: scale(1.28, 1);
    letter-spacing: var(--letterSpace);
  }
}
            
          
!
            
              
// https://john-dugan.com/javascript-debounce/
// https://codepen.io/johndugan/pen/BNwBWL?editors=001
var debounce=function(e,t,n){var a;return function(){var r=this,i=arguments,o=function(){a=null,n||e.apply(r,i)},s=n&&!a;clearTimeout(a),a=setTimeout(o,t||200),s&&e.apply(r,i)}};



// Remove SVG focus in IE v1.0 17/08/2016
// https://websemantics.uk/articles/removing-svg-keyboard-focus-in-internet-explorer/
// 275 bytes gzipped (384 bytes uncompressed)
(function(e,c){function f(){for(var a=c.getElementsByTagName("svg"),b=a.length;b--;)a[b].setAttribute("focusable",!1)}(function(){var a=-1,b=e.navigator.userAgent,d=b.indexOf("MSIE "),c=b.indexOf("Trident/");0<d?a=parseInt(b.substring(d+5,b.indexOf(".",d)),10):0<c&&(a=b.indexOf("rv:"),a=parseInt(b.substring(a+3,b.indexOf(".",a)),10));return-1<a?a:void 0})()&&f()})(window,document);



// Adjust heights along a grid row - Requires matchHeights().
// MUST: Initial run before matchHeight()

(function(config) {
  "use strict";

  // Sets the values of data-matchHeights along a grid row.
  // Which are then height matched by the original matchHeights() function.

  var dataAttr = config.dataAttr || "data-matchHeights";
  var gridItemClass = config.gridItemClass || "grid_item";

  function getRowLength(gridItems, totalItems) {

    var firstItemTop = gridItems[0].offsetTop;
    var itemNo;

    for (itemNo = 1; itemNo < totalItems; itemNo++) {
      if (firstItemTop < gridItems[itemNo].offsetTop) {
        break;
      }
    }
    return itemNo;

  }

  function init() {

    var gridItems = document.querySelectorAll("." + gridItemClass);

    if (!gridItems) {return false;}

    var totalItems = gridItems.length;
    var rowLength = getRowLength(gridItems, totalItems);
    var rows = Math.ceil(totalItems / rowLength);
    var rowNo, itemNo, elementNo, stampNo, matchElements, matchElementsLength;

    // ES5 for compatability down to IE10
    for (rowNo = 0; rowNo < rows; rowNo++) { // Each row
      for (itemNo = 0; itemNo < rowLength; itemNo++) { // Each grid item

        stampNo = (rowNo * rowLength) + itemNo;
        if (stampNo >= totalItems) {break;}

        matchElements = gridItems[stampNo].querySelectorAll("[" + dataAttr + "]");
        matchElementsLength = matchElements.length;

        for (elementNo = 0; elementNo < matchElementsLength; elementNo++) { // Each element
          matchElements[elementNo].setAttribute(dataAttr, String.fromCharCode(65 + elementNo) + rowNo);
        }

      }
    }
  }

  init();
  window.addEventListener("resize", debounce(init, 100, false), false);

})({dataAttr: "data-matchHeights", gridItemClass: "grid_item"});



// Matching non-linear element heights - v1.0 - 18/12/2016 - M.J.Foskett - https://websemantics.uk/
// https://codepen.io/2kool2/pen/MbqGOQ
var matchHeights = function () {

  "use strict";

  var dataAttr ="data-matchHeights";
  var minViewportWidth = 628;

  function _getHeightSetsArray(dataAttr) {
    // Return an array containing the different values of data-data-heightmatch
    var value;
    var arr = [];
    var sets = document.querySelectorAll("[" + dataAttr + "]");
    var i = sets.length;
    while (i--) {
      value = sets[i].getAttribute(dataAttr);
      if (arr.indexOf(value) === -1) {
        arr.push(value);
      }
    }
    return arr;
  }

  function _resetMinHeights(set) {
    // reset min-heights by removing the inline style.
    var i = set.length;
    while (i--) {
      set[i].removeAttribute("style");
    }
  }

  function _getMaxSetHeight(set) {
    // return the height of the tallest element in set
    var maxHeight = 0;
    var currentHeight;
    var i = set.length;
    while (i--) {
      currentHeight = set[i].clientHeight;
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    }
    return maxHeight;
  }

  function _setMinHeight(set, matchedHeight) {
    var i = set.length;

    while (i--) {
      set[i].style.minHeight = matchedHeight + "px";
    }
  }

  function init() {

    var sets = _getHeightSetsArray(dataAttr);
    var i = sets.length;
    var set;

    while (i--) {

      set = document.querySelectorAll("[" + dataAttr + "=\"" + sets[i] + "\"]");

      _resetMinHeights(set);

      // Only above minimum screen width
      if (document.body.clientWidth >= minViewportWidth) {

        _setMinHeight(set, _getMaxSetHeight(set));

      }
    }
  }

  init();

};


window.addEventListener("load", matchHeights, false);
window.addEventListener("resize", debounce(matchHeights, 100, false), false);

            
          
!
999px
Loading ..................

Console