Почему некоторые элементы сетки отображаются не по порядку? - PullRequest
Новая
       29

Почему некоторые элементы сетки отображаются не по порядку?

1 голос
/ 21 апреля 2020

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

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

Есть ли способ, которым я могу достичь этого только с помощью 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;
}
<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>

Ответы [ 2 ]

1 голос
/ 21 апреля 2020

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

. Это будет sh шестым элементом справа, следующим за потоком сетки, которая является позиция предыдущего элемента 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 голосов
/ 21 апреля 2020

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

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

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

Итак, 6 помещается перед 7, 15 перед 16, и так далее c., И все размещены в порядке.

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>

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

...