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

Question

[Maксим Волков]

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

.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% .



Как можно при использовании CSS Grid – сделать так, чтобы при отсутствии контента – верхний блок .grid_category – занимал минимальное пространство по высоте, а нижний .grid_content – максимально доступное?

Answer 1

[Сергей delphinpro]

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

Comments

[Maксим Волков]

Благодарю!