更改 CSS 网格中的列顺序

2024-05-15

我正在研究 CSS 网格。

当我在桌面尺寸上查看它时(min-width: 769px)，我有单行三列。像这样的事情：

---------------------------------------------
|   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;
}

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

The grid-template-areas财产
基于线路的布局
The order财产
The dense的功能grid-auto-flow财产。（可能是此类布局最简单、最简单和最强大的解决方案，因为它适用于任意数量的网格项。）

这是原始布局：

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 演示 1 https://jsfiddle.net/3mke2k69/5/

1. The `grid-template-areas`财产

The 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 演示 2 https://jsfiddle.net/3mke2k69/6/

从规格来看：

7.3.命名区域：grid-template-areas财产 https://www.w3.org/TR/css3-grid-layout/#grid-template-areas-property

该属性指定命名网格区域，哪些不是与任何特定网格项相关联，但可以从网格放置属性。

的语法grid-template-areas酒店还提供网格结构可视化，进行整体布局网格容器的结构更容易理解。

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

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

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

2. 基于线路的布局

Use grid-row-start, grid-row-end, grid-column-start, grid-column-end，或者他们的简写，grid-row and 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 演示 3 https://jsfiddle.net/3mke2k69/7/

从规格来看：

8.3.基于线路的布局：grid-row-start, grid-column-start, grid-row-end, and grid-column-end特性 https://www.w3.org/TR/css3-grid-layout/#line-placement

3. The `order`财产

The orderGrid 布局中的属性与 Flex 布局中的属性相同。

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 演示 3 https://jsfiddle.net/3mke2k69/8/

从规格来看：

6.3.重新排序的网格项目：order财产 https://www.w3.org/TR/css3-grid-layout/#order-property

4. The `dense`的功能`grid-auto-flow`财产

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

虽然这个解决方案与前三个相比没有提供任何重大优势在问题中描述的布局中，它仅由三个网格项组成，当网格项数量较多或动态生成时，它提供了巨大的好处。

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

01  03
02  02

但假设我们需要这个：

01  03
02  02

04  06
05  05

07  09
08  08

10  12
11  11

and so on...

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

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

通过应用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 演示 4 https://jsfiddle.net/29oa3jds/

从规格来看：

§7.7。自动放置：grid-auto-flow财产 https://www.w3.org/TR/css3-grid-layout/#grid-auto-flow-property

dense

如果指定，自动放置算法将使用“密集”包装算法，如果满足以下条件，它会尝试填充网格中较早的洞较小的项目稍后会出现。

如果省略，则使用“稀疏”算法，其中放置算法仅在放置物品时在网格中“向前”移动，绝不走回头路去填补漏洞。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

cssgrid