Я работаю над макетом CSS-сетки, который выглядит примерно так: https://jsfiddle.net/ftL5zw0x/23 / где я не знаю, сколько предметов у меня будет.

< Сильный > HTML:

<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
</div>

< Сильный > CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 8px;
}

.item {
  background-color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-child(8n+1), div:nth-child(8n+3), div:nth-child(8n+7), div:nth-child(8n+8) {
  grid-row: span 1;
}

div:nth-child(8n+2), div:nth-child(8n+4), div:nth-child(8n+5), div:nth-child(8n+6) {
  grid-row: span 2;
}

Макет выглядит так, как я хочу, но проблема в заказе. Каждый 6-й и 7-й элементы появляются не по порядку, они должны поменяться местами, в то время как макет остается неизменным. (Например, пункты 6 и 7)

Есть ли способ, которым я могу достичь этого только с помощью CSS?

1
Paul Alexandru 21 Апр 2020 в 20:03

2 ответа

Лучший ответ

Сначала измените ваши селекторы, которые являются 7th элементом, который должен охватывать не 6th

Это подтолкнет 6-й элемент вправо, следуя потоку сетки, которая является позицией предыдущего элемента 5th

Однако мы можем принудительно установить положение каждого элемента 6th, потому что мы знаем, что это второй столбец.

Это заставит элементы 7th и 8th следовать за элементом 6th, это можно исправить с помощью grid-auto-flow:row dense;

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: row dense;
  grid-gap: 8px;
}

.item {
  background-color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-child(8n+1),
div:nth-child(8n+3),
div:nth-child(8n+6),
div:nth-child(8n+8) {
  grid-row: span 1;
}

div:nth-child(8n+2),
div:nth-child(8n+4),
div:nth-child(8n+5),
div:nth-child(8n+7) {
  grid-row: span 2;
}

div:nth-child(8n+6) {
  grid-column: 2;
}
<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
</div>
0
Zohir Salak 21 Апр 2020 в 17:33

Хотя каждый 6-й и 7-й элемент появляются не по порядку, они не по порядку.

Посмотрите на пункт 5 (элемент span 2). Верхняя половина находится в ряду 2, а нижняя - в ряду 3. Но она помещается в ряд 2.

То же самое для пункта 6. Верхняя половина находится в ряду 2, а нижняя половина - в ряду 3. Она помещается в ряд 2, который находится перед строкой 3, где находится элемент 7.

Итак, 6 ставится перед 7, 15 - до 16 и т. Д., И все упорядочено.

enter image description here

Ориентация на эти элементы с помощью CSS не имеет большого значения.

div:nth-child(8n+6),
div:nth-child(8n+7) {}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 8px;

}

.item {
  background-color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-child(8n+1), div:nth-child(8n+3), div:nth-child(8n+7), div:nth-child(8n+8) {
  grid-row: span 1;
}

div:nth-child(8n+2), div:nth-child(8n+4), div:nth-child(8n+5), div:nth-child(8n+6) {
  grid-row: span 2;
}

div:nth-child(8n+6),
div:nth-child(8n+7) {
    background-color: lightgreen;
}
<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
</div>

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

0
Michael_B 21 Апр 2020 в 18:33