Defining a Grid with fr units

<div class="cards">

  <div class="card">

​

​

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">

​

​

  </div>

​

  <div class="card">

​

​

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour2.jpg" alt="Bristol harbour">

​

  </div>

​

  <div class="card">

​

​

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/coloured-balloon.jpg" alt="Coloured balloon">

​

  </div>

​

  <div class="card">

​

​

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/champagne-balloons.jpg" alt="Fortnum and Mason balloon">

​

  </div>

​

  <div class="card">

​

​

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/funfair-balloons.jpg" alt="Funfair">

​

  </div>

​

  <div class="card">

​

​

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/swatch.jpg" alt="Swatch Balloon">

​

  </div>

​

  <div class="card">

​

​

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/minion.jpg" alt="Minion Balloon">

​

  </div>

​

  <div class="card">

​

​

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/where-is-the-basket.jpg" alt="Balloonist">

​

  </div>

  <div class="card">

​

​

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/pink-balloon.jpg" alt="Balloon">

​

  </div>

</div>