Defining a Grid defining row tracks with grid-auto-rows

defining-a-grid-defining-row-tracks-with-grid-auto-rows.markdown

Defining a Grid defining row tracks with grid-auto-rows

Setting the size of implicit row tracks.

A Pen by Enso Armand on CodePen.

License.

index.html

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

style.css

.cards {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3,1fr);
  grid-auto-rows: 200px;
}

.cards img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fafafa;
}

img {
  max-width: 100%;
  display: block;
}

.cards {
  margin: 0 auto;
  max-width: 800px;
}

.card {
  background-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic" rel="stylesheet" />