CSS Grid — автоматическая высота строк, изменение размера в соответствии с содержимым ⇐ CSS

[Anonymous]

У меня есть две сетки, вложенные в сетку. К сожалению, правая вложенная сетка .grid-3 устанавливает высоту строк так, что левая и правая сетка имеют одинаковую высоту, дополнительное пространство распределяется между элементами div с классом .right. Как настроить строки правой вложенной сетки так, чтобы они соответствовали размеру содержимого, чтобы они имели ту же высоту, что и левые вложенные строки?

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

div {
border: 1px dotted black;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
}

.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: auto;
}

.left {
background-color: red;
}

.right {
background-color: green;
}

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

L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L


R
R
R
R
R
R
R
R
R
R
R
R
R

Подробнее здесь: https://stackoverflow.com/questions/497 ... to-content