Могу ли я ограничить предмет сетки определенной частью моих колонок сетки [закрыто] ⇐ CSS

[Anonymous]

Я строю сетку на основе 12 столбцов. 12 столбцов находятся в центре экрана в пространстве 1200PX с пробелом вокруг него. Обычно столбцы будут в центре, но я хочу, чтобы сетка-элемент имел возможность заполнить экран. < /P>
Это нужный вид:
Введите описание изображения здесь < /p>
Моя единственная проблема заключается в том, что, когда моя сеть имеет несколько рядов, столбцы не выровнены в центре. Колонны сетки? В моем случае это было бы внутри повторного (12, minmax (0, 1fr)) части?

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

.grid {
display: grid;
grid-template-columns: [full-start] calc((100% - 1200px) / 2) repeat(12, minmax(0, 1fr)) calc((100% - 1200px) / 2) [full-end];
gap: 20px;
}

.grid:before,
.grid:after {
content: "";
}

.grid > div {
height: 50px;
background: cornflowerblue;
}

.small-5 {
grid-column-end: span 5;
}

.small-7 {
grid-column-end: span 7;
}

.small-12 {
grid-column-end: span 12;
}

.full {
grid-column: full;
}< /code>



< /code>
< /div>
< /div>
< /p>
Я попробовал сетку, но тогда мои столбцы будут размещены друг на друге..grid {
display: grid;
grid-template-columns: [full-start] calc((100% - 1200px) / 2) repeat(12, [main] minmax(0, 1fr)) calc((100% - 1200px) / 2) [full-end];
gap: 20px;
}

.small-12 {
grid-column: main / span 12;
}

Это сработало немного лучше, но я все еще понял проблему под друг другу

- это то, что я пытаюсь отображать: grid?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... te-columns