Могу ли я поместить предмет сетки в определенную часть моих колонок сетки ⇐ CSS

[Anonymous]

Я строю сетку на основе 12 столбцов. 12 столбцов находятся в центре экрана в пространстве 1200PX с пробелом вокруг него. Обычно столбцы будут в центре, но я хочу, чтобы сетка была в состоянии заполнить экран. < /P>
.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>


My only problem is that when my grid has multiple rows the small-12 classes aren't aligned in the center like I want them. Is there a way I can contain columns inside repeat(12, minmax(0, 1fr))?
I tried grid-area, but then my columns wouldn't flow next to each other anymore.
I also tried giving the repeat a name and starting my columns from that name
.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;
}
< /code>
This worked a bit better, but I still got the flow issue


Is what I'm trying possible within display: grid?

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