@Shimpanze

Как в 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;
}

Спасибо!
  • Вопрос задан
  • 831 просмотр
Пригласить эксперта
Ответы на вопрос 1
Прежде, чем использовать css-grid попробуй пройти эту игру: https://cssgridgarden.com/#ru, я думаю в последних уроках найдешь ответ на свой вопрос :)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы