CSS 有一些属性常常被用来解决布局问题：如（浮动float、定位postion）这些比拟 hack 的办法常常会给页面遗留下一些问题。
弹性盒子Flexbox是一个十分好的布局工具，网格布局 CSS Grid Layout 是最新、更弱小的布局形式。本文就来简略介绍一下什么是网格布局。
网格布局(CSS Grid Layout)
网格布局是二维的布局零碎，和过来罕用的布局形式相比齐全扭转了咱们设计UI的形式。
须要理解的术语
Grid Container(网格容器)，Grid Item(网格容器子元素)。
Grid Line(网格线)，Grid Cell(网格单元格)。
Grid Track(网格轨道)，Grid Area(被网格线离开的区域)。
图例参考
页面构造
<div class="container"> <div class="item item_a">item_a</div> <div class="item item_b">item_b</div> <div class="item item_c">item_c</div></div>定义一个网格布局的容器
.container { display: grid;}设置网格行、列
.container { display: grid; grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 100px [row1-end] 100px [third-line] 100px [last-line];}通过下面的形式就申明了一个 3行5列 的网格容器。
设置网格容器内元素地位
.item_a { grid-column-start: 4; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 2; background-color: orange;}.item_b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 3; grid-row-end: span 2; background-color: aqua;}.item_c { grid-column-start: 2; grid-column-end: span 1; grid-row-start: 2; grid-row-end: span 1; background-color: rgb(149, 255, 0);}后果图：
能够看出对应的item曾经被放在网格指定的地位。设想一下如果没有网格布局，你将会怎么实现这个布局图？
到此，兴许你对网格布局还是一头雾水，不过好消息是我搞到一张舞弊图，你能够对照图例自行修炼（欲练此功，必须用功）：
文章到此就完结了，如果帮到你了，欢送点赞。
文章首发于 IICOOM-集体博客 | 技术博客 - 《CSS Grid Layout(网格布局)》