我正在玩CSS网格.
当我在桌面大小(最小宽度：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;
}
这是原始布局：
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-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;
}规格参考：
07002
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-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或它们的shorthands,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;
}规格参考：
07004
3.订单
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;
}规格参考：
07006