Почему нижние элементы grid по высоте меньше, чем самые верхние?

.section {
  justify-content: center;
}

.cards_spec_list {
  display: grid;
  border: 1px solid red;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.card_spec {
  background: #e6e7ee;
  border: 1px solid green;
  height: 350px;
  padding: 10px;
}

li {
  color: #0f5ba7;
}

.card_spec>h2 {
  color: #082a4d;
}

i {
  color: #082a4d;
}

<div class="section">
    <div class="cards_spec_list">
      <div class="card_spec">
        <h2 style="color: #082a4d">ИЗОБРАЗИТЕЛЬНОЕ ИСКУССТВО</h2>
        <div class="store__card">
          <strong>Педагогическое образование</strong>
          <br>
          <i style="color: #082a4d">Факультет социально-педагогический</i>
          <br>
          <p>Вступительные испытания:</p>
          <li style="color: #0f5ba7">Обществознание (ЕГЭ)</li>
          <li style="color: #0f5ba7">Русский язык (ЕГЭ)</li>
          <li style="color: #0f5ba7">Профессиональное испытание</li>
          <br>
          <p>Очная / Заочная</p>
        </div>
      </div>

      <div class="card_spec">
        <h2 style="color: #082a4d">ИНОСТРАННЫЕ ЯЗЫКИ</h2>
        <div class="store__card">
          <strong>Педагогическое образование (с двумя профилями подготовки)</strong>
          <br>
          <i style="color: #082a4d">Филологический факультет</i>
          <br>
          <p>Вступительные испытания:</p>
          <li style="color: #0f5ba7">Обществознание (ЕГЭ)</li>
          <li style="color: #0f5ba7">Русский язык (ЕГЭ)</li>
          <li style="color: #0f5ba7">Профессиональное испытание</li>
          <br>
          <p>Очная</p>
        </div>
      </div>

      <div class="card_spec">
        <h2 style="color: #082a4d">ТЕХНОЛОГИИ СОЦИАЛЬНОЙ РАБОТЫ В РАЗЛИЧНЫХ СФЕРАХ ЖИЗНИДЕЯТЕЛЬНОСТИ</h2>
        <div class="store__card">
          <strong>Социальная работа</strong>
          <br>
          <i style="color: #082a4d">Социально-педагогический факультет</i>
          <br>
          <p>Вступительные испытания:</p>
          <li style="color: #0f5ba7">Русский язык (ЕГЭ)</li>
          <li style="color: #0f5ba7">История (ЕГЭ)</li>
          <li style="color: #0f5ba7">Обществознание (ЕГЭ) / Литература (ЕГЭ)</li>
          <br>
          <p>Очная</p>
        </div>
      </div>

      <div class="card_spec">
        <h2>ИЗОБРАЗИТЕЛЬНОЕ ИСКУССТВО</h2>
        <div class="store__card">
          <strong>Педагогическое образование</strong>
          <br>
          <i>Факультет социально-педагогический</i>
          <br>
          <p>Вступительные испытания:</p>
          <li>Обществознание (ЕГЭ)</li>
          <li>Русский язык (ЕГЭ)</li>
          <li>Профессиональное испытание</li>
          <br>
          <p>Очная / Заочная</p>
        </div>
      </div>

      <div class="card_spec">
        <h2>ИЗОБРАЗИТЕЛЬНОЕ ИСКУССТВО</h2>
        <div class="store__card">
          <strong>Педагогическое образование</strong>
          <br>
          <i>Факультет социально-педагогический</i>
          <br>
          <p>Вступительные испытания:</p>
          <li>Обществознание (ЕГЭ)</li>
          <li>Русский язык (ЕГЭ)</li>
          <li>Профессиональное испытание</li>
          <br>
          <p>Очная / Заочная</p>
        </div>
      </div>
  </div>

section {
  position: relative;
  float: left;
  margin: 2em 1em 1em 0;
  border: 1px solid red;
  display: grid;
  gap: .5em;
  width: 8em;
}
  
section::before {
  content: attr(style);
  position: absolute;
  inset: auto 0 100% 0;
  margin-bottom: .25em;
}

div {
  background: silver;
}

<section style="grid-template-rows: 2em">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

<section style="grid-template-rows: 2em 2em">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

<section style="grid-auto-rows: 2em">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

<section style="grid-auto-rows: 2em 1em">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>