Расширять и сжимать элементы div, используя сетку CSS ⇐ CSS

[Anonymous]

У меня есть один родительский элемент div, внутри которого есть три дочерних элемента: 1, 2 и 3.

Код: Выделить всё

.parent {
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;
}

.child1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}

.child2 {
grid-row: 2 / 3;
grid-column: 1 / 2;
}

.child3 {
grid-row: 1 / 3;
grid-column: 2 / 3;
}

Но child1 и child2 не занимают всю высоту строки. Есть ли способ, чтобы child2 начинался с того места, где заканчивается child1, или я ограничен полной высотой этой строки на основе строк Grid-template-rows?

Подробнее здесь: https://stackoverflow.com/questions/793 ... g-css-grid