.a~
.b定位在任何位置，比如说，你现在想要
.a和
.f对换，那么很简单就能实现：复制代码<font face=”Courier New”>
<font face=”Arial”>.a{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background:red;
}
.f {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
background:orange;
}</font>
</font>
运行的效果如下：
在线案例
网格线简写
前面两个示例向大家演示了如何用网格线实现布局，可以说是简单方便，唯一就是写代码麻烦，要什么
grid-column-start、
grid-column-end等等。其实有一种简写方式，可以让你不再痛苦。网格线的简写方式，其实就是
grid-column和
grid-row的
start与
end值合并在一起，两者之间用
/来分隔。比如：复制代码<font face=”Courier New”>
<font face=”Arial”>.a{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}</font>
</font>
可以写成：
复制代码<font face=”Courier New”>
<font face=”Arial”>.a{
grid-column: 1 / 2;
grid-row: 1 / 2;
}</font>
</font>
这样一来，上例的代码，我们就可以换成简写方式：
复制代码<font face=”Courier New”>
<font face=”Arial”>.a{
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.c {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
.d {
grid-column: 7 / 8;
grid-row: 1 / 2;
}
.e {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.f {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.g {
grid-column: 5 / 6;
grid-row: 3 / 4;
}
.h {
grid-column: 7 / 8;
grid-row: 3 / 4;
}
.i {
grid-column: 1 / 2;
grid-row: 5 / 6;
}
.j {
grid-column: 3 / 4;
grid-row: 5 / 6;
}</font>
</font>
效果依旧：
