Как сделать равные блоки по высоте внутри grid?

Question

[William]

как с помощью grid или flex сделать бирюзовый блок из первой колонки в такую же высоту, как блок из второй колонки?
то есть, если внутренний блок расширяется по высоте, то, следовательно и в соседней колонке данный блок также расширяется
и после данных блоков, чтобы кнопка шла на одной линии

jsfiddle.net/znbdtokg

Comments

[Ankhena]

как с помощью grid или flex сделать бирюзовый блок из первой колонки в такую же высоту, как блок из второй колонки?

На флексах и гридах с такой разметкой на данный момент - никак.

Максимум так: https://jsfiddle.net/890ewn3L/
Или аналогично на флексах с помощью margin-top auto при flex-direction: column.

У вас слишком много оберток, или col или grid лишняя.

Ждите subgrid.

[William]

Ankhena, понял, реализовал с помощью jquery

[Pavel-ww]

Можно так (max-height узкое место, но может быть для вашей задачи приемлемо или другие единицы можно использовать).
Добавьте в самый низ что бы переписать существующие стили (на всякий)

.grid {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.block {
	flex: 1;
	max-height: 120px;
	box-sizing: border-box;
	margin-bottom: 10px;
}

Answer 1

[Антон Романков]

Не уверен, что на CSS получится такое реализовать. Здесь каждый div.block расположен в своей колонке и не имеет никакой связи с другими div.block'ами. Сами колонки можно выровнять по высоте без проблем.
Можно сделать на JS.

const blocks = document.querySelectorAll('.block')
const maxHeight = Math.max(...Array.from(blocks).map(block => {
  const { height } = block.getBoundingClientRect()
  return height
}))
blocks.forEach(block => {
  block.style.height = maxHeight
})