我正在玩CSS网格。
当我在桌面大小 override func awakeFromNib() {
super.awakeFromNib()
self.accessoryType = .disclosureIndicator
}
上查看时，我有一行包含3列 - 如下所示：
(min-width: 769px)我可以用css-grid移动列，这样我就可以在移动布局上做这样的事情了：
---------------------------------------------
| col 1 | col 2 | col 3 |
| | | |
---------------------------------------------
我知道我用这样的东西跨越了细胞：
---------------------------------------------
| col 1 | col 3 |
| | |
---------------------------------------------
| col 2 |
---------------------------------------------
但我想更改列的顺序。没有预处理器，我可以这样做吗？
这是我当前的网格类：
.content{
grid-column: 1 / span2;
}
答案 0 :(得分：14)
网格布局提供了多种重新排列网格项的方法。我在下面列出了三个。
这是原始布局：
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>
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-areasproperty此属性指定 命名的网格区域 ，但不是 与任何特定网格项相关联，但可以从中引用 网格放置属性。
grid-template-areas属性的语法也提供了一个 可视化网格结构，使整体布局 网格容器更容易理解。所有字符串必须具有相同的列数，否则声明无效。
如果命名网格区域跨越多个网格单元格，但这些单元格不形成单个填充矩形，则声明无效。
注意：此模块的未来版本可能允许使用非矩形或断开连接的区域。
使用grid-row-start，grid-row-end，grid-column-start，grid-column-end或其缩写grid-row和grid-column来设置网格项＆＃ 39;网格中的大小和位置。
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>
规范参考：
order 网格布局中的order属性与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>
规范参考：