css grid布局的首次使用
首先来看一下效果图
接下来废话不多说，先上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 610px; height: 610px; margin: 100px auto; display: grid;/* 说明以grid布局 */ grid-template-columns: 200px 5px 200px 5px 200px;/* 网格划分为五列，包括间隔 */ grid-template-rows: 200px 5px 200px 5px 200px;/* 网格划分为五行，包括间隔 */ } .a{ grid-column-start: 1;/* 单元格开始的那条列线 */ grid-column-end: 2;/* 单元格结束的那条列线 */ grid-row-start: 1;/* 单元格开始的那条行线 */ grid-row-end: 4;/* 单元格结束的那条行线 */ background: #5a5eff; } .b{ grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; background: #F672E2; } .c{ grid-column-start: 5; grid-column-end: 6; grid-row-start: 1; grid-row-end: 2; background: #FDF505; } .d{ grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; background: #F90B0B; } .e{ grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; grid-row-end: 6; background: #41a8ff; } .f{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; background: #10FDD0; } .g{ grid-column-start: 3; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #16FA07; } </style> </head> <body> <div class="box"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> <div class="e"></div> <div class="f"></div> <div class="g"></div> </div> </body> </html>
代码就这么多，还是挺简单的。
网格如下划分成五列，则用了6条列线
划分为五行，则用了6条行线
（请随意吐槽这张图片）
主要可以参考，http://www.tuicool.com/articles/F3mMJzv，里面有较详细的说明，图片也比较清晰，个人推荐可以参考一下
结合这张图片，应该很好理解的
还是很容易理解 的。
