CSS网格排序

Question

我有类似的东西：

div:not(.mega) { background: yellow; width:150px; }
.right { background: red !important; }
/* // */

.mega {
  display: grid;
  grid-template-columns: 200px 200px;
}

.left {
  grid-column: 1;
}

.right {
  grid-column: 2;
}

<div class="mega">
  <div class="left">One</div>
  <div class="right">Two</div>
  <div class="left">Three</div>
  <div class="left">Four</div>
  <div class="right">Five</div>
  <div class="right">Six</div>
  <div class="left">Seven</div>
</div>

有没有办法，使用CSS网格使它看起来像：

One      Two
Three    Five
Four     Six
Seven

这些是我尝试这样做的，但这些元素并没有一个接一个地跟随：

https://jsfiddle.net/e7vt6jmn/

Answer 1

CSS-Grid确实允许对元素进行排序，但你可能需要单独使用order，并且必须放弃当前的CSS。

在这个特定的实例中，您可以使用nth-child和后续的兄弟选择器来管理它。

div:not(.mega) {
  background: yellow;
  width: 150px;
}

.right {
  background: red !important;
}

.mega {
  display: grid;
  grid-template-columns: 200px 200px;
}

div {
  order: 1;
}

div:nth-child(5) {
  order: 2;
}

div:nth-child(4),
div:nth-child(5)~div {
  order: 3;
}

<div class="mega">
  <div class="left">One</div>
  <div class="right">Two</div>
  <div class="left">Three</div>
  <div class="left">Four</div>
  <div class="right">Five</div>
  <div class="right">Six</div>
  <div class="left">Seven</div>
</div>