Почему мой текст перетекает в следующий столбец? ⇐ CSS

[Anonymous]

Я пытался найти ответ на этот вопрос, однако все методы, которые я использовал, не сработали. У меня есть 4 столбца, которые мне нужны на моем веб-сайте, и когда я помещаю абзац огромного (или относительно нормального) размера в свой HTML, мой CSS переносит текст в следующий столбец и странным образом обрезает его в конце столбца, который должен был быть когда сетка полностью простирается до нижней части страницы.
Это то, что я сейчас делаю, и я ожидал, что текст будет в одном столбце, идущем вниз, а не в следующем . Это мой текущий CSS (кстати, я использую CSS-сетку):

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

.columns {
width: auto;
display: inline-block;
column-count: 4;
grid-column: 6;
grid-row: 6 / span 8;
margin-top: 10px;
text-align: center;
text-overflow: ellipsis;
}

.col {
overflow-wrap: break-word;
}

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

[img]https://dummyimage.com/100x80/000/fff[/img]
Ut efficitur dapibus lorem, a facilisis eros aliquet vel. Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam
auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis
eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam
auctor sc

[img]https://dummyimage.com/100x80/000/fff[/img]
Hi

[img]https://dummyimage.com/100x80/000/fff[/img]
Hi

[img]https://dummyimage.com/100x80/000/fff[/img]
Hi

Извините, если это так беспорядочно, я новичок в веб-разработке. Я ценю любую помощь!

Подробнее здесь: https://stackoverflow.com/questions/791 ... ext-column