Q:

4x3 grid with two items double height

I'm trying to create 4x3 grid with two items double height.

.grida {
 width:540px;
 display: grid;
 row-gap: 14px;
 grid-template-columns: repeat(4, 120px);
 justify-content:space-evenly;
 align-content: space-evenly;
 background-color: #fff;
 color: #444;
}

.card {
 background-color: #ddd;
 color: #555;
 border-radius: 5px;
 padding: 5px;
 font-size: 150%;
 height:68px;
}

.a {
 grid-row: auto / span 2;
}

.g {
 grid-row: auto / span 2;
}
<div class='grida'>
  <div class="card a">A</div>
  <div class="card b">B</div>
  <div class="card c">C</div>
  <div class="card d">D</div>
  <div class="card e">E</div>
  <div class="card f">F</div>
  <div class="card g">G</div>
  <div class="card h">H</div>
  <div class="card i">I</div>
  <div class="card j">J</div>
</div>

Why are there empty blocks?
I want a and g to be double height.
Any help?

A:

grid-row doesn't work because you are setting a height on the card divs. In order to adjust the "height" of card divs, I did a trick using padding. Do this:

.grida {
 width:540px;
 display: grid;
 row-gap: 14px;
 grid-template-columns: repeat(4, 120px);
 justify-content:space-evenly;
 align-content: space-evenly;
 background-color: #fff;
 color: #444;
}

.card {
 background-color: #ddd;
 color: #555;
 border-radius: 5px;
 font-size: 150%;
 padding: 30px 5px
}

.a, .g {
 grid-row: auto / span 2 !important;
}
<div class='grida'>
  <div class="card a">A</div>
  <div class="card b">B</div>
  <div class="card c">C</div>
  <div class="card d">D</div>
  <div class="card e">E</div>
  <div class="card f">F</div>
  <div class="card g">G</div>
  <div class="card h">H</div>
  <div class="card i">I</div>
  <div class="card j">J</div>
</div>

