Отображать список элементов в виде таблицы только с CSS?

Question

Отображение списка в виде таблицы с 3 столбцами, с равномерно распределенными элементами и с полем 10px со всех сторон и между строками.

.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; }

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Должен быть представлен как

Этого можно добиться с помощью макета flex, но для этого потребуется более сложный HTML, см. Пример ниже.

.item { width: 10px; height: 10px; background: black; }

.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0;  }

<div class="grid">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
 </div>

Интересно, можно ли это сделать с чистым CSS, без добавления каких-либо дополнительных элементов HTML. Размер .items не должен быть изменен, и он неизвестен.

Answer 1

Темани Афиф написал хороший ответ.Flexbox один будет работать только для 2-3 строк, но версия сетки будет работать для большего количества элементов.

Сетка CSS может быть еще более упрощена с помощью space-between, что избавляет от полей и n-th child селекторов.

.item {
   width: 10px;
   height: 10px;
   background: black;
}
   
.row {
   display: grid;
   grid-template-columns: repeat(3,10px); /*change this*/
   grid-gap: 10px;
   padding:10px;
   background: #eee;
   justify-content: space-between;  /*add this*/
 }
  

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

Вы можете сделать это с помощью flexbox, добавив скрытый элемент между первой и последней строкой, который будет width:100%, таким образом, вы избежите изменения HTML:

.item {
  width: 10px;
  height: 10px;
  background: black;
}

.row {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #eee;
  flex-wrap: wrap;
}

.row:after {
  content: "";
  width: 100%;
  height: 10px;
}

.row :nth-child(n + 4) {
  order: 1;
}

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Если номер элемента неизвестен, вы можете рассмотреть CSS-сетку:

.item {
  width: 10px;
  height: 10px;
  background: black;
}
.row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
  padding:10px;
  background: #eee;
}
.row :nth-child(3n + 2) {
  margin:auto;
}
.row :nth-child(3n + 3) {
  margin-left:auto;
}

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>