Как задать размер шапок карточек такой же, что и у длинных надписей?

Question

[dsntmttr]

<style>
#grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 1vw;
  }

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 350px;

  text-align: center;
  font-family: arial;
}

h4 {
  background: #EEEEEE;
  padding: 5px;
}
</style>

<div id="grid">

  <div class="card">
    <h4>Британия 2 Барокко</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/011_britania_2_b.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Британия 3 Барокко</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/011_britania_3_b.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Британия 4 Барокко</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/011_britania_4_b.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Британия 4 Ампир</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/011_britania_4_ampir.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Мальта ПГ</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/012_malta_pg.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Мальта Сицилия</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/012_malta_sicilia.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Мальта Лаура</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/012_malta_luara.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Палермо Ампир</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/012_palermo_ampir.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Ричард ПО</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/013_richard_po.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Ричард ПГ</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/013_richard_pg.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Афина</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/013_afina.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Афина ПГ</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/013_afina_pg.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>


  <div class="card">
    <h4>Афина ПГ</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/013_afina_pg.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Помпея</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/014_pompea.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Помпея ПГ</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2020/08/014_pompea_pg.jpg" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

</div>

Comments

[Ankhena]

При одинаковых других блоках, можно задать заголовкам flex-grow:1.
Либо js.
Либо ждать grid: subgrid, пока его умеет только FF.