Как заставить элементы CSS Grid фиксированной ширины занимать всю ширину родительского элемента? [закрыто] ⇐ CSS

[Anonymous]

Я хочу, чтобы элементы сетки с фиксированной шириной охватывали всю ширину родительского контейнера, оставляя между ними одинаковое расстояние. Во Flexbox этого можно добиться с помощью justify-content: space-between. Как я могу добиться аналогичного макета с помощью CSS Grid?
Вот пример кода, с которым я работаю:

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

.wrapper {
background-color: black;
width: 500px;
margin: 0 auto;
padding: 0 30px;
}

.grid {
display: grid;
grid-template-columns: repeat(16, 1fr);
justify-items: center;
width: 100%;
gap: 25px;
}

.grid-item {
background-color: red;
grid-column: span 4;
width: 50px;
height: 50px;
}

.grid-item:nth-child(5) {
grid-column: 3 / span 4;
}

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

Вот как это должно выглядеть (первый элемент выровнен по левому краю) и четвертый элемент выровнен по правому краю родительского представления):



Подробнее здесь: https://stackoverflow.com/questions/793 ... rent-eleme