CSS 网格排序答案

【问题标题】：CSS grid sortingCSS 网格排序
【发布时间】：2018-10-29 14:29:26
【问题描述】：

我得到了类似的东西：

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/

【问题讨论】：

SO 不是代码编写服务。请在提问之前先尝试一下，或者添加您尝试过的代码 sn-p。 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
你的元素是不是故意乱序的？从左到右阅读 Four 和 Five 似乎放错了位置 - 我想这就是你问这个问题的原因 - 但是这有程序/逻辑原因吗？
@SuperDJ 我在网上看，但找不到解决方案：/我添加了一个 sn-p
@DavidThomas 这是元素可以有不同顺序的一点
CSS-Grid 确实允许对元素进行排序但是您可能需要对每个元素进行单独排序，而您当前的 CSS 将不得不放弃。我怀疑这是一个“砌体” 问题，您可能需要重新考虑您的布局方法。

标签： css css-grid

【解决方案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>

【讨论】：