CSSGrid布局：合并单元格布局
转载于 segmentfault/a/1190000002448197
《》⼀⽂中通过⼀些简单的实例介绍了如何给容器定义⽹格，并且怎么使⽤⽹格线或者⽹格区域来实现单元格这样的简单的布局。在⽂章结尾之处也提到过，这样的单元格如同表格⼀样，仅仅⼀个个独⽴的单元格是⽆法满⾜⼀些复杂的Web布局，我们需要将多个单元格合并在⼀起，拼装成⼀个稍为复杂⼀点的布局。简单点说，就是由单元格慢慢过渡到具有合并单元格的布局（在脑海中想想曾经爱过的table）。
那么接下来我们要介绍的是如何使⽤CSS Grid Layout实现⼀些更有意思的布局。
期待中的布局...
在脑海中有很多种布局效果，那我们先来看⼀种常见的，简单的布局模板，如下图所⽰：
上图也是这⼀章需要实现的⼀种布局⽅式，就将其称为⽹格的合并单元格布局，因为他和表格中的合并单元格是⾮常的相似。
⼤家是否还记得，在《》⼀⽂中通过⽹格线的grid-column-start、grid-column-end、grid-row-start和grid-row-end（或者grid-column: start / end和grid-row: start / end）可以⾮常⽅便的实现单元格的布局，那么这种⽅式同样可以运⽤于合并的单元格布局中。如此⼀来，如果我们需要实现上图展⽰的布
局，就可以给每个⼦元素设置⽹格线，然后划分出各⾃的占位区。来看看其对应的⽹格线：
有了这样的⽰意图，我想要实现这个布局对于⼤家来说并不是⼀件复杂的事情。接下来我们通过实例来演⽰。
基于⽹格线实现单元格合并从⽰图中不难发现:A区（.a ）跨越了三列和两个列间距，对应⽹格布局中，他占了五个⽹格，从⽹格线上来划分，他是列⽹格线line1、line6和⾏⽹格线line1、line2圈起的空间C、D、E、G和H⼏个区与以前介绍的单元格并⽆不同之处，对于的⽹格线可以看上⾯的⽹格线展⽰⽰意图F区（.f ）跨越了两列和⼀个列间距，对应⽹格布局中，他占了三个⽹格，从⽹格线上来划分，他是列⽹格线line1、line4和⾏⽹格线line5、line6圈起的空间I区(.i )和F区类似，只不过他是列⽹格线line3、line6和⾏⽹格线line7、line8圈起的空间
J区(.j )和A区类似，只不过他是列⽹格线line1、line6和⾏⽹格线line9、line10圈起的空间
B区(.b )和前⾯⼏个区都有点不⼀样，他是将⾏合并在⼀起，跨越了⽹格中所有的⾏，从⽹格线上来划分，他是列⽹格线line7、line8和⾏⽹格
线line1、line10圈起的空间
从外观上看，这跟平时看到的两列布局⾮常的相似。不同之处是这⾥通过⽹格来实现。来看看具体代码：
HTML
CSS
<div class ="wrapper">
<div class ="box a">A</div>
<div class ="box b">B</div>
<div class ="box c">C</div>
<div class ="box d">D</div>
<div class ="box e">E</div>
<div class ="box f">F</div>
<div class ="box g">G</div>
<div class ="box h">H</div>
<div class ="box i">I</div>
<div class ="box j">J</div>
</div>
body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto; }
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
}
.a{
grid-column: 1 / 6;
grid-row: 1 / 2;
}
.b {
grid-column: 7 / 8;
grid-row: 1 / 10;
background: orange;
}
.c {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.d {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.e {
grid-column: 5 / 6;
grid-row: 3 / 4;
}
.f {
grid-column: 1 / 4;
grid-row: 5 / 6;
}
.g {
grid-column: 5 / 6;
grid-row: 5 / 6;
}
.h {
grid-column: 1 / 2;
grid-row: 7 / 8;
}
.i {
grid-column: 3 / 6;
grid-row: 7 / 8;
}
.j {
grid-column: 1 / 6;
grid-row: 9 / 10;
}
效果如下：
点击预览
从效果图中，不难发现，虽然在B区通过⽹格线定义了跨⾏：
.b {
grid-column: 7 / 8;
grid-row: 1 / 10;
background: orange;
}
但浏览器实际解析并不是跟我们想象的⼀样。为什么跨⾏没有效果呢？具体是什么原因，说实在的，我也不知道，或许有⼀天会更正这个问题。那么有没有⽅法能解决呢？我们先继续往下看吧。或许你能到你需要的答案。
基于⽹格线使⽤关键词span实现单元格合并
在CSS Grid Layout布局中除了使⽤⽹格线合并单元格之外，还可以使⽤关键词span来实现单元格合并。
接下来的实例，将使⽤span关建词完成上例⼀样的效果。
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto; }
.a{
grid-column: 1 / span 5;
grid-row: 1;
}
.b {
grid-column: 7;
grid-row: 1 / span 9;
background: orange;
}
.c {
grid-column: 1;
css怎么创建grid-row: 3;
}
.d {
grid-column: 3;
grid-row: 3;
}
.
e {
grid-column: 5;
grid-row: 3;
}
.f {
grid-column: 1 / span 3;
grid-row: 5;
}
.g {
grid-column: 5;
grid-row: 5;
}
.h {
grid-column: 1;
grid-row: 7;
}
.i {
grid-column: 3 / span 3;
grid-row: 7;
}
.j {
grid-column: 1 / span 5;
grid-row: 9;
}
实现的效果⼀样：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。