Как в CSS Grid задать высоту одному элементу?

Здравствуйте!

Есть разметка:

<div class="wrapper">
  <div class="block"></div>
  <div class="main"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Количество их может варьироваться.

Вопрос: как привязать высоту элементов к их классу? Чтобы высота элементов с классом «block» была «auto», а высота элементов с классом «main», была «1fr».

Вот такой код не подходит:

grid-template-rows:
    auto
    1fr
    auto
    auto
  ;

...так как, всякий раз, при добавлении нового блока, надо лезть в CSS, искать, анализировать и прописывать новую структуру. А так - мы оперируем классами в HTML, и CSS не трогаем.

Нужно что-то типа этого:

div.wrapper {
  display: grid;
}

div.block {
  [нужное свойство]: auto;
}

div.main {
  [нужное свойство]: 1fr;
}

Спасибо!