Соберите сетку CSS, используя динамическое количество строк, 2 столбца на строку? ⇐ Html

[Anonymous]

У меня есть некоторые проблемы с созданием сетки CSS, где я могу иметь бесконечное количество строк, но только 2 столбца на строку. Я не уверен, правильно ли у меня настройка HTML - я читаю, что у вас есть контейнер сетки CSS (родитель), а затем элементы ( Direct потомки), поэтому я изменил свой HTML, чтобы отразить это. Однако теперь все повторяющиеся строки свернуты в один. > Html < /p>

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

text 1


text 2


text 3


text 4

< /code>
css < /p>
.titles {
display: grid;
grid-template-columns: [icon-start] 0.8em [text-start] auto [text-end];
grid-template-rows: repeat(auto-fit, [row-start] 100% [row-end]);
}

.titles svg {
grid-column: icon-start / text-column;
grid-row: row-start / row-end;
text-align: center;
width: 0.8em;
fill: $off-white;
height: 0.6em;
}

.titles p {
grid-column: text-start / text-end;
grid-row: row-start / row-end;
}
< /code>
Сетка появляется так, когда все ряды появляются друг на друга:

Я думал, что определение строк как повторное (...) 

, он создаст 1 строку для каждого svg и p , каждый из тех, кто занимает свой собственный столбец. Я полагаю, что столбцы настроены правильно, но, кажется, это определено только 1 строка.
Я разработчик Node.js по торговле, поэтому сетка для меня новеньша.

Подробнее здесь: https://stackoverflow.com/questions/794 ... ns-per-row