更改 CSS 网格中的列顺序答案

【问题标题】：Change the column order in a css grid更改 CSS 网格中的列顺序
【发布时间】：2018-01-04 04:35:14
【问题描述】：

我在玩 CSS 网格。

当我在桌面尺寸(min-width: 769px) 上查看它时，我有一行 3 列 - 类似这样：

---------------------------------------------
|   col 1     |         col 2       | col 3 |
|             |                     |       |
---------------------------------------------

我可以使用 css-grid 移动列，以便在移动布局上执行类似的操作：

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

我知道我用这样的东西跨越单元格：

.content{
  grid-column: 1 / span2;
}

但我想更改列的顺序。我可以在没有预处理器的情况下做到这一点吗？

这是我当前的网格类：

.my-grid {
   display:grid;
   grid-template-columns: 15% 1fr 25% ;
   grid-template-rows: 1fr; /* for as many rows as you need */
   grid-gap: 10px;
   border: 2px solid #222;
   box-sizing: border-box;
}

【问题讨论】：

CSS Grid 似乎支持 flexbox 中使用的order。 gridbyexample.com/examples/example23
是的，行得通，列跨度有问题，但现在也解决了。
酷。我对网格不太熟悉，所以帮不上什么忙..

标签： html css css-grid

【解决方案1】：

网格布局提供了多种重新排列网格项目的方法。我在下面列出了四个。

grid-template-areas 属性
基于行的放置
order 属性
grid-auto-flow 属性的 dense 函数。 （对于这种类型的布局，这可能是最简单、最简单和最强大的解决方案，因为它适用于任意数量的网格项。）

这是原始布局：

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle demo 1

1。 `grid-template-areas` 属性

grid-template-areas 属性允许您使用 ASCII 视觉艺术来安排布局。

将网格区域名称（为每个元素定义）放在您希望它们出现的位置。

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
  grid-template-areas: "column-1 column-2 column-3";
}

grid-item:nth-child(1) { grid-area: column-1; }
grid-item:nth-child(2) { grid-area: column-2; }
grid-item:nth-child(3) { grid-area: column-3; }

@media ( max-width: 500px ) {  
  grid-container { 
        grid-template-columns: 1fr 1fr; 
        grid-template-areas: " column-1 column-3 " 
                             " column-2 column-2 ";
   }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle demo 2

来自规范：

7.3. Named Areas: the grid-template-areas property

此属性指定命名的网格区域，它们不是与任何特定的网格项目相关联，但可以从网格放置属性。

grid-template-areas 属性的语法还提供了一个网格结构的可视化，使整体布局网格容器更容易理解。

所有字符串的列数必须相同，否则声明无效。

如果一个命名的网格区域跨越多个网格单元，但这些单元没有形成一个填充的矩形，则声明无效。

注意：此模块的未来版本可能允许非矩形或不连续区域。

2。基于行的放置

使用grid-row-start、grid-row-end、grid-column-start、grid-column-end或其简写形式grid-row和grid-column来设置网格项在网格中的大小和位置。

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; }
  grid-item:nth-child(2) { grid-row: 2 / 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { grid-row: 1 / 2; grid-column: 2 / 3; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle demo 3

来自规范：

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

3。 `order` 属性

Grid Layout 中的order 属性与 Flex Layout 中的属性相同。

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { order: 1; }
  grid-item:nth-child(2) { order: 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { order: 2; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle demo 3

来自规范：

6.3. Reordered Grid Items: the order property

4.`grid-auto-flow`属性的`dense`函数

此解决方案可能是此处介绍的所有解决方案中最简单、最简单且最可靠的解决方案，因为它适用于任意数量的网格项目。

虽然此解决方案与问题中描述的布局中的前三个相比没有任何主要优势，后者仅包含三个网格项，但当网格项的数量增加时，它提供了巨大的好处更高或动态生成。

这个问题和上面的解决方案解决了这个问题：

01  03
02  02

但是假设我们需要这个：

01  03
02  02

04  06
05  05

07  09
08  08

10  12
11  11

and so on...

使用grid-template-areas、基于行的放置和order，解决方案将需要大量的硬编码（如果我们知道项目总数），可能还需要 CSS 自定义属性和/或 JavaScript（如果项目是动态生成的）。

而 CSS Grid 的 dense 功能可以简单轻松地处理这两种情况。

通过将grid-auto-flow: dense 应用于容器，每第三个项目将回填由于连续排序而创建的空单元格。

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

@media (max-width: 500px) {
  grid-container {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;     /* KEY RULE; deactive to see what happens without it;
                                  defaults to "sparse" (consecutive ordering) value */
  }
  grid-item:nth-child(3n + 2) {
    grid-column: 1 / 3;
  }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(-n + 3)                    { background-color: aqua; }
grid-item:nth-child(n + 4):nth-child(-n + 6)   { background-color: lightgreen; }
grid-item:nth-child(n + 7):nth-child(-n + 9)   { background-color: orange; }
grid-item:nth-child(n + 10):nth-child(-n + 12) { background-color: lightgray; }

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
  <grid-item>4</grid-item>
  <grid-item>5</grid-item>
  <grid-item>6</grid-item>
  <grid-item>7</grid-item>
  <grid-item>8</grid-item>
  <grid-item>9</grid-item>
  <grid-item>10</grid-item>
  <grid-item>11</grid-item>
  <grid-item>12</grid-item>
</grid-container>

jsFiddle demo 4

来自规范：

§7.7. Automatic Placement: the grid-auto-flow property

密集

如果指定，自动放置算法使用“密集”包装算法，它会尝试在网格中较早地填充孔较小的项目稍后会出现。

如果省略，则使用“稀疏”算法，其中放置算法只在放置项目时在网格中“向前”移动，永远不要回溯以填补漏洞。

【讨论】：

1。 grid-template-areas 属性

2。基于行的放置

3。 order 属性

4.grid-auto-flow属性的dense函数

1。 `grid-template-areas` 属性

3。 `order` 属性

4.`grid-auto-flow`属性的`dense`函数