Как задать высоту строк в CSS Grid Layout в зависимости от наличия контента?

При верстке сайта – каталога интернет магазина, использовались гриды, контейнер, сайд бар, и строки для категорий и товаров.
667d49f4df46b466497183.jpeg

.grid
	display: grid
	grid-template-columns: calc( 100% - 320px ) 290px
	grid-template-rows: auto auto
	gap: 0 30px
	
.grid_category
	grid-column: 1 / 2
	grid-row: 1 /2

.grid_content
	grid-column: 1 / 2
	grid-row: 2 / 3

.grid_sidebar
	grid-column: 2 / 3
	grid-row: 1 / 3


Однако при отсутствии контента, пустые строки при данной разметке делят свободное пространство по полам, и по высоте занимают по 50% .

667d4a5e33768766711561.jpeg

Как можно при использовании CSS Grid – сделать так, чтобы при отсутствии контента – верхний блок .grid_category – занимал минимальное пространство по высоте, а нижний .grid_content – максимально доступное?
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
- grid-template-rows: auto auto
+ grid-template-rows: auto 1fr
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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