更改 css 网格中的列顺序
Change the column order in a css grid
我正在玩 CSS 个网格。
当我在桌面尺寸 (min-width: 769px) 上查看它时，我有一行 3 列 - 像这样：
---------------------------------------------
| col 1 | col 2 | col 3 |
| | | |
---------------------------------------------
我可以使用 css-grid 移动列以便我可以在移动布局上做这样的事情吗：
---------------------------------------------
| col 1 | col 3 |
| | |
---------------------------------------------
| col 2 |
---------------------------------------------
我知道我用这样的东西跨越单元格：
.content{
grid-column: 1 / span2;
}
但我想更改列的顺序。我可以在没有预处理器的情况下这样做吗？
这是我当前的网格class:
.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;
}
网格布局提供了多种重新排列网格项的方法。我在下面列出了四个。
grid-template-areas属性- 基于行的放置
order属性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>
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>
来自规范：
7.3. Named Areas: the grid-template-areas
property
This property specifies named grid areas, which are not
associated with any particular grid item, but can be referenced from
the grid-placement properties.
The syntax of the grid-template-areas property also provides a
visualization of the structure of the grid, making the overall layout
of the grid container easier to understand.
All strings must have the same number of columns, or else the declaration is invalid.
If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.
Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.
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>
来自规范：
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>
来自规范：
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自定义属性 and/or JavaScript（如果项目是动态生成的）。
而CSS网格的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>
来自规范：
§7.7. Automatic Placement: the grid-auto-flow property
dense
If specified, the auto-placement algorithm uses a “dense” packing
algorithm, which attempts to fill in holes earlier in the grid if
smaller items come up later.
If omitted, a “sparse” algorithm is used, where the placement
algorithm only ever moves “forward” in the grid when placing items,
never backtracking to fill holes.
我正在玩 CSS 个网格。
当我在桌面尺寸 (min-width: 769px) 上查看它时，我有一行 3 列 - 像这样：
---------------------------------------------
| col 1 | col 2 | col 3 |
| | | |
---------------------------------------------
我可以使用 css-grid 移动列以便我可以在移动布局上做这样的事情吗：
---------------------------------------------
| col 1 | col 3 |
| | |
---------------------------------------------
| col 2 |
---------------------------------------------
我知道我用这样的东西跨越单元格：
.content{
grid-column: 1 / span2;
}
但我想更改列的顺序。我可以在没有预处理器的情况下这样做吗？
这是我当前的网格class:
.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;
}
网格布局提供了多种重新排列网格项的方法。我在下面列出了四个。
grid-template-areas属性- 基于行的放置
order属性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>
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>
来自规范：
7.3. Named Areas: the
grid-template-areaspropertyThis property specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties.
The syntax of the
grid-template-areasproperty also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.All strings must have the same number of columns, or else the declaration is invalid.
If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.
Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.
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>
来自规范：
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>
来自规范：
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自定义属性 and/or JavaScript（如果项目是动态生成的）。
而CSS网格的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>
来自规范：
§7.7. Automatic Placement: the
grid-auto-flowpropertydense
If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later.
If omitted, a “sparse” algorithm is used, where the placement algorithm only ever moves “forward” in the grid when placing items, never backtracking to fill holes.