Выравнивание элементов сетки по всей строке / столбцу (как в случае с гибкими элементами)

Question

С помощью гибкого контейнера и набора flex-wrap: wrap вы можете выровнять переполняющие элементы по центру, используя justify-content: center.

Есть ли способ добиться того же поведения при переполнении элементов сетки с использованием сетки CSS?

Я создал ручку, показывающую желаемое поведение при изгибе

.container-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container-flex .item {
  width: 33.33%;
  background: green;
  border: 1px solid;
}

.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container-grid .item {
  background: red;
  border: 1px solid;
}

* {
  box-sizing: border-box;
}

<h3>Flex</h3>
<div class="container-flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<h3>Grid</h3>
<div class="container-grid">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

https://codepen.io/JoeHastings/pen/PeEjjR

Answer 1

Flex и Grid - разные животные, поэтому простое поведение в flex может не очень хорошо сказаться на grid.

Элемент flex может центрироваться по всему контейнеру, так как макет flex работает с flex flex * . Гибкая линия - это строка или столбец.

Когда гибкий элемент просят центрировать в строке / столбце, он получает доступ к доступному пространству на всей строке, от начала до конца.

Однако в макете сетки линии сетки должны сталкиваться с чем-то, чего нет в гибких линиях: отслеживать стены . Например, в вашем коде есть три столбца. Эти столбцы разбивают линию сетки на три отдельных раздела, а элементы сетки ограничиваются разделом.

Поэтому элемент сетки нельзя центрировать в строке, используя свойства выравнивания ключевых слов (например, justify-content или justify-self), поскольку стены, разделяющие столбцы, ограничивают движение. Эта проблема не существует на гибких линиях.

Чтобы элемент сетки был отцентрирован по строке, в контейнере должен быть только один столбец (то есть без разделителей), или элемент должен быть явно перемещен в центр, используя что-то вроде линейное размещение . В противном случае используйте flexbox.

Answer 2

Не так, как вы хотите с flex. Вы должны быть точными с CSS-Grid,

<h3>Grid</h3>
<div class="container-grid">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item-mid">item</div>
</div>
.container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
    .item {
        background: red;
        border: 1px solid;
    }
    .item-mid{
        background:purple;
        grid-column:2/1;
    }

Также, смотрите здесь,

Центрирование в сетке CSS

(однако это не упаковка)