Центральная сетка CSS, когда элементы меньше, чем столбцы ⇐ CSS

[Anonymous]

Допустим, у меня есть простая сетка, которая помещает элементы в 4 столбца, заполняющую всю ширину контейнера: < /p>

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

.container {
background: lightyellow;
padding: 10px 20%;
text-align: center;
}

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
justify-content: center;
}

.item {
height: 100px;
background-color: red;
}

.container + .container {
margin-top: 30px;
}< /code>

News






News




< /code>
< /div>
< /div>
< /p>
Как видите, это работает отлично, но только до тех пор, пока у меня не будет 4 или более элементов. Если у меня меньше элементов, они помещаются в соответствующие ячейки, но, поскольку правые ячейки пусты, визуально сетка начинает выглядеть «влево выровнять». Это не круто, если сам контейнер сосредоточен на странице, как в примере выше. Я попытался использовать повторный (Auto-Fit, 25%) 

, но он не принимает во внимание Grid-Gap . Повторите (Auto-Fit, Minmax (25%, 1FR)) растягивает содержание вместо того, чтобы сосредоточить его.


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