Question

我正在尝试重新排列CSS GRID的顺序。

但是显然所有网格项目的默认订单值均为0。因此，将order: 1;应用于网格项目将使其他所有项目都排在之后，而不是之前。

我希望我的所有网格项目默认都具有升序。因此，我可以使用order: 2;并将项目实际放置在第二位。

你能帮我吗？！

这里有个例子，（我的实际代码有点复杂）

<div class="grid">

<p class="item">1</p>
<p class="item">2</p>
<p class="item two">3</p>
<p class="item">4</p>

</div>

.grid {
  display: grid;
  padding: 30px;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
}

.two { order: 2; }

我尝试过这样做，但是没有用；

.item:nth-child(1) { order:1; }
.item:nth-child(2) { order:2; }
.item:nth-child(3) { order:3; }
.item:nth-child(4) { order:4; }

提琴：https://jsfiddle.net/3695vs27/

Answer 1

如果您查看MDN上的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/order，则会看到订单的默认值为0，因此任何未明确设置订单的内容将成为主要元素，然后应用明确设置的来源

您可以使用类似以下的内容。

.grid {
  display: grid;
  padding: 30px;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
}

.item:nth-child(2) { order:3; }
.item:nth-child(3) { order:2; }
.item:nth-child(4) { order:4; }

<div class="grid">

<p class="item">1</p>
<p class="item">2</p>
<p class="item two">3</p>
<p class="item">4</p>

</div>

或者变得有些棘手，我们可以使用通用的同级组合器来处理在交换元素之后出现的元素。

基于评论进行编辑

如果将类应用于要向上移动的元素而不是向下移动的元素，则可以使用1个类和3个选择器来实现这一点选择器和一点点的专门性。

.grid {
  display: grid;
  padding: 30px;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
}

/*Swap the elements - now targeting the element we want to move UP*/
.item.three{ order:3; }
/*Move the next item sibling down*/
.item.three + .item { order:2; }
/*Deal with the elements after the swap with some sibling combinators 
by targeting all the siblings of the immediate sibling we targeted above*/
.item.three + .item ~ .item { order:4; }

<div class="grid">

<p class="item">1</p>
<p class="item three">2</p>
<p class="item">3</p>
<p class="item">4</p>
<p class="item">5</p>
<p class="item">6</p>
<p class="item">7</p>

</div>

下移项目

我们也可以向下做，但是有点棘手。对于任何给定的数字都很难做到这一点，因为您需要知道什么元素在哪里。目前，这可能是CSS无法达到的，您最好使用一些JavaScript。

.grid {
  display: grid;
  padding: 30px;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
}

/*Target the element to move down*/
.item.two{ order:2; }
/*Now we need to know where we are moving the item to and use nth-child again*/
.item:nth-child(2) { order:3; }
/*Adjust the remaining siblings, but not the one we've already moved*/
.item:nth-child(2) ~ .item:not(.two) { order:4; }

<div class="grid">

<p class="item">1</p>
<p class="item">2</p>
<p class="item">3</p>
<p class="item">4</p>
<p class="item two">5</p>
<p class="item">6</p>
<p class="item">7</p>

</div>

使用Javascript路线

要通过类启用任意放置，我们将使用javascript为CSS覆盖的每个元素赋予本机顺序。

let items = document.querySelectorAll(".grid .item");

for(var i = 0; i < items.length; i++) {
  //Only update items without a modifying class
  if(items[i].classList.length == 1) {
    items[i].style.order=i;
  }
}

.grid {
  display: grid;
  padding: 30px;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
}

.two {order:2; color:red;}
.six {order:6; color:green;}
.ten {order:10; color:blue;}

<div class="grid">

<p class="item">1</p>
<p class="item">2</p>
<p class="item six">3</p>
<p class="item">4</p>
<p class="item two">5</p>
<p class="item">6</p>
<p class="item">7</p>
<p class="item">8</p>
<p class="item">9</p>
<p class="item">10</p>
<p class="item">11</p>
<p class="item">12</p>
<p class="item">13</p>
<p class="item">14</p>
<p class="item ten">15</p>
<p class="item">16</p>

</div>

但是，如果我沿着javascript路径走，我会跳过用于排序的类并使用数据属性。

使用属性选择器可以将数据属性设置为样式。这样，您的元素列表可以任意长，您不必担心每个插入点的CSS类。

let items = document.querySelectorAll(".grid .item");

for(var i = 0; i < items.length; i++) { 
    //if we have a data attribute use that, otherwise use the natural order
    items[i].style.order= items[i].dataset.order ? items[i].dataset.order :  i;
}

.grid {
  display: grid;
  padding: 30px;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
}


[data-order] {
font-weight:bold;
background-color:#EEE;
}

<div class="grid">

<p class="item">1</p>
<p class="item">2</p>
<p class="item" data-order="6">3</p>
<p class="item">4</p>
<p class="item" data-order="2">5</p>
<p class="item">6</p>
<p class="item">7</p>
<p class="item">8</p>
<p class="item">9</p>
<p class="item">10</p>
<p class="item">11</p>
<p class="item">12</p>
<p class="item">13</p>
<p class="item">14</p>
<p class="item" data-order="10">15</p>
<p class="item">16</p>

</div>

CSS GRID无法按以下顺序重新排列项目：;

1 个答案: