Как разрешить тексту сетки переходить на следующую строку ⇐ CSS

[Anonymous]

Как вы можете видеть в таблице ниже, у меня есть две строки. Первая строка содержит элемент и текст, а вторая строка — просто текст:

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

.container {  display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"Image Image Text-1"
"Image Image Text-1"
"Text-2 Text-2 Text-2";
}

.Image { grid-area: Image; }

.Text-1 { grid-area: Text-1; }

.Text-2 { grid-area: Text-2; }

div{
outline : 1px solid black
}

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

Grid elements comes here
Top Text Top Text Top Text Top Text Top Text Top Text Top Text
Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text
Top Text Top Text Top Text Top Text Top Text Top Text Top Text
Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text

Эта структура сетки представляет текст рядом с изображением, а остальная часть текст (то есть вторая часть того же абзаца) под изображением.
Я хотел бы знать, возможно ли (при необходимости можно использовать что-то кроме сетки) добиться того же структура с одним элементом div, содержащим текст, где текст начинается рядом с изображением и переходит в строку ниже, когда места нет.

Конечная цель :



Подробнее здесь: https://stackoverflow.com/questions/784 ... e-next-row