it-swarm.com.ru

Как мне создать сетку 3х3 с помощью CSS?

Учитывая 9 divs один за другим, я хочу создать сетку 3X3 с помощью CSS.

Как я могу это сделать?

.cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

/* this doesn't work; at least not in safari */
.cell:nth-child(3n)::after {
  display: block;
}
<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>


Примечание: Я не хочу float/clear решения. Основное внимание уделяется CSS, а не реструктуризации HTML.

Если я добавлю content: '\A'; white-space: pre; к ::after, результат будет ужасным.

.cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

.cell:nth-child(3n)::after {
  display: inline;
  content: '\A';
  white-space: pre;
}
<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>

Как мне получить все div в макете столбца строки 3X3?

16
user900360

Этот макет прост с 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>


Преимущества flexbox:

  1. минимальный код; очень эффективный
  2. центрирование, как по вертикали, так и по горизонтали, просто и легко
  3. столбцы одинаковой высоты просты и легки
  4. несколько вариантов выравнивания гибких элементов
  5. это отзывчиво
  6. в отличие от плавающих элементов и таблиц, которые предлагают ограниченную емкость макетов, поскольку они никогда не предназначались для построения макетов, flexbox - это современная (CSS3) методика с широким спектром опций.

Чтобы узнать больше о посещении flexbox:


Поддержка браузера:

Flexbox поддерживается всеми основными браузерами, кроме IE <10 . В некоторых последних версиях браузеров, таких как Safari 8 и IE10, требуются вендорные префиксы . Для быстрого добавления префиксов используйте Autoprefixer . Более подробно в этот ответ .

14
Michael_B

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

.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>

9
Andy Hoffman

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

  • CSS таблицы

    или же

  • плыть налево  

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

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

Вариант 1 (таблицы CSS): с изменениями в HTML, оборачивая каждые 3 ячейки подряд.

.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>


Обновление

Option2 (float:left): без изменений HTML, используя clear:left для каждого (4-го) n элемента.

.cell {
  width: 50px;
  height: 50px;
  background: grey;
  float: left;
  margin: 5px
}
.cell:first-child + div+ div,
.cell:first-child + div+ div + div + div + div,
.cell:first-child + div+ div + div + div + div + div + div + div {
  background: red
}
.cell:first-child + div+ div + div,
.cell:first-child + div+ div + div + div + div + div,
.cell:first-child + div+ div + div + div + div + div + div + div + div {
  clear: left
}
<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>

7
dippas

Просто чтобы добавить еще одну, вы также можете сделать сетку 3х3, используя только один <div>. Плункер

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;
}
3
C14L

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

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