Ценю, если полезно. Игнорировать, если нет.

ользую сетку CSS для макета некоторых элементов, как это ...

#container {
  display: grid;
  grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}

.item {
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}
<div id="container">
  <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 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 class="item">Item</div>
  <div class="item">Item</div>
</div>

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

Это то, что я должен использовать вместо Flexbox? Или CSS-сетки подходят для использования?

 Paulie_D18 сент. 2017 г., 13:08
Нет ... я так не думаюесли Вы знаете количество оставшихся предметов. Затем вы можете добавить целую кучу правил CSS для настройкиcolumn-start, Но ,,, что должно произойти, когда естьстранный количество оставшихся предметов?
 bhansa18 сент. 2017 г., 12:52
Полезная статья:zellwk.com/blog/responsive-grid-system
 kukkuz18 сент. 2017 г., 13:57
@ fightstarr20 Я не думаю, что CSS-сетки предназначены для этого - это 2D-макет. В примере у вас есть макет, который течет в одном измерении - так что используйтеflexbox...

Ответы на вопрос(6)

flex

.center-item {
    grid-column: 1 / -1;
}

позволяющего заставить последний ряд вести себя иначе, чем предыдущий.

Тем не менее, на основе того факта, что вы определяете набор ширины, которые соответствуютn элементы в ширину области просмотра, вы можете использовать Flexbox и егоjustify-content свойство.

Установите этоcenter и он будет центрировать последнюю строку для любого количества элементов.

Фрагмент стека

html, body {
  margin: 0;
}

#container {
  display: flex;
  flex-wrap: wrap;                  /*  allow items to wrap  */
  justify-content: center;          /*  horizontally center items  */
}

.item {
  flex-basis: calc(16.666% - 20px); /*  subtract the margin from the width  */
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;           /*  make padding be included in the set width  */
}
<div id="container">
  <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 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 class="item">Item</div>
  <div class="item">Item</div>
</div>

в котором все имеет значения X и Y, как в электронной таблице.

Да, вы хотите систему, в которой элементы обертываются. Flexbox отвечает всем требованиям здесь из-заflex-wrap.

#container {
  padding: 10px;
  width: calc((100px + (10px * 2)) * 4); /* item width + padding on either side times number of items */
  display: flex;
  flex-wrap: wrap;
  background: blue;
  margin: 10px;
}

#container div {
  width: 100px;
  height: 100px;
  flex-grow: 1;
  background: red;
  margin: 10px;
}

https://jsfiddle.net/0c0hzh8t/

Это заставляет детей занимать все доступное пространство, которое, если строка заполнена, будет нулевым и будет иметь стандартный размер.

Если вы хотите, чтобы размер контейнера определялся автоматически, удалитеwidth свойство и контейнер и его элементы будут изменены автоматически. Это также хорошо, но я предполагаю, что вы хотите определить количество элементов в строке.

 Ilya Streltsyn19 сент. 2017 г., 23:15
Это хорошее объяснение того, почему компоновка сетки не соответствует требованиям ОП. Это действительно должно иметь более высокий рейтинг!
Решение Вопроса

justify-content: center.

Это упаковывает все предметы в горизонтальном центре ряда. Тогда ваши края раздвигают их.

На полностью заполненных рядах,justify-content не будет иметь никакого эффекта стам нет свободного места для работы.

На рядах со свободным пространством (в вашем случае только последний ряд) происходит центрирование.

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

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}
<div id="container">
  <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 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 class="item">Item</div>
</div>

но насколько я знаю, если вы хотите использовать Flex-box, используйте этот код.

#container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
 }

.item {
  flex: 1;
  flex-basis: 16.66%;
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}
<div id="container">
  <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 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 class="item">Item</div>
  <div class="item">Item</div>
</div>

Ценю, если полезно. Игнорировать, если нет.

#wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 0;
  grid-column-gap: 15px;
  padding: 15px 15px 0 15px;
}

.item {
  border: 1px solid #000;
  height: 200px;
  margin-bottom: 15px;
}
<div style="width: 100%; margin: 0 auto; text-align: center; vertical-align: middle;">
  <div style="overflow: auto; height: 400px; margin-top: 15px;">
    <div style="position: relative">
      <div id="wrapper">
        <div class="item"><div>Item 1</div></div>
        <div class="item"><div>Item 2</div></div>
        <div class="item"><div>Item 3</div></div>
        <div class="item"><div>Item 4</div></div>
        <div class="item"><div>Item 5</div></div>
        <div class="item"><div>Item 6</div></div>
        <div class="item"><div>Item 7</div></div>
        <div class="item"><div>Item 8</div></div>
      </div>
      <div style="position: absolute; bottom: -30px; text-align: center; margin: 0 auto; width: 100%;">
        <div style="background-color: #defabc; width: 300px; margin: 0 auto; text-align: center; cursor: pointer;">
          <span style="color: #000;">See all items</span>
        </div>
      </div>
    </div>
  </div>
</div>

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

Но, по крайней мере, это хорошее альтернативное решение в качестве обходного пути.

Ваш ответ на вопрос