Как создать сетку 3x3 через CSS?

Ответ 1

Этот макет прост с CSS flexbox. Без изменений в HTML.

.grid {
  display: flex;                       /* establish flex container */
  flex-wrap: wrap;                     /* enable flex items to wrap */
  justify-content: space-around;
  
}
.cell {
  flex: 0 0 32%;                       /* don't grow, don't shrink, width */
  height: 50px;
  margin-bottom: 5px;
  background-color: #999;
}
.cell:nth-child(3n) {
  background-color: #F00;
}

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

Ответ 2

Теперь, когда CSS сетка довольно очень хорошо поддерживается, я думал, что дополнение ответа с более современным решением.

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

div > div {
  padding: 10px;
  background-color: #ccc;
}

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

Ответ 3

Помимо отличного ответа от @Michael_B на использование flexbox, вы можете использовать

• Таблицы CSS

  или

• float: left

  для поддержки старых браузеров, таких как IE 8/9, которые flexbox не поддерживает.

Примечание IE8 не поддерживает nth-child, но поддерживает first/last-child

Option1 (CSS Tables): с изменениями в HTML, обертывание каждой из трех ячеек в строке.

.grid {
  display: table;
  border-spacing: 5px
}
.row {
  display: table-row
}
.cell {
  width: 50px;
  height: 50px;
  background: grey;
  display: table-cell;
}
.row div:last-child {
  background: red
}

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

Ответ 4

Чтобы добавить еще один, вы также можете создать сетку 3x3, используя только один <div>. Plunker

HTML:

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

CSS

.grid {
  width: 50px; height: 50px;
  background-color: red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  margin: 0 50px;
  position: relative;
  box-shadow: inset 0 4px 0 -2px white,
              inset 0 -4px 0 -2px white;
}
.grid::before {
  content: '';
  width: 50px; height: 50px;
  background-color: red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  margin: 0;
  position: absolute; left: -52px; top: -50px;
  box-shadow: inset 0 4px 0 -2px white,
              inset 0 -4px 0 -2px white;
}
.grid::after {
  content: '';
  width: 50px; height: 50px;
  background-color: red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  margin: 0;
  position: absolute; right: -52px; top: -50px;
  box-shadow: inset 0 4px 0 -2px white,
              inset 0 -4px 0 -2px white;
}

Ответ 5

Я знаю, что вопрос задает четкое решение без float, но после попытки решения flexbox я обнаружил, что он не сохранил ширину моих элементов (в дальнейшем чтение подсказывает, что мне может потребоваться установить ширину на элемент контейнера). Однако в конкретном случае сетки 3x3 (в отличие от сетки с n рядами по три), решение с плавающей точкой более кратким и работает красиво. Здесь это на случай, если другие найдут этот ответ при поиске решения, как я:

.cell {
  float: left;
  height: 100px;
  width: 100px;
  margin: 5px;
}
.cell:nth-child(4) {
  clear: left;
}
.cell:nth-child(7) {
  clear: left;
}