Try the new CSS Grid Layout
grid-container { display: grid; grid-auto-rows: 50px; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); }[short] { grid-row: span 1; background-color: green;}[tall] { grid-row: span 2; background-color: crimson;}[taller] { grid-row: span 3; background-color: blue;}[tallest] { grid-row: span 4; background-color: gray;}<grid-container> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item tall></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item taller></grid-item> <grid-item short></grid-item> <grid-item tallest></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item tallest></grid-item> <grid-item tall></grid-item> <grid-item taller></grid-item> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item taller></grid-item> <grid-item short></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item tallest></grid-item> <grid-item taller></grid-item> <grid-item short></grid-item> <grid-item tallest></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item></grid-container>建立一个块级网格容器。该grid-auto-rows属性设置自动生成的行的高度。在此网格中，每行高度为50px。
该grid-gap属性是一个速记grid-column-gap和grid-row-gap。此规则在网格项目之间设置10px的间距。（不适用于物品和容器之间的区域。）该grid-template-columns属性设置显式定义的列的宽度。该符号定义重复列（或行）的模式。reeat
该 函数告诉网格在 不使容器溢出的情况下尽可能多地排列列（或行）。（这可以创建与Flex布局类似的行为。）auto-fill
flex-wrap: wrap
该minmax()函数为每列（或行）设置最小和最大大小范围。在上面的代码中，每列的宽度最小为容器的30％，最大为
可用的可用空间。的fr单元表示在网格容器中的自由空间的一小部分。相当于flexbox的flex-grow属性。
使用grid-row和span告诉网格项目它们应该跨越多少行。浏览器对CSS网格的支持
Chrome-自2017年3月8日起全面支持（版本57）Firefox-截至2017年3月6日（版本52）全面支持Safari-自2017年3月26日起提供全面支持（版本10.1）Edge-截至2017年10月16日（版本16）全面支持IE11-不支持当前规范；支持过时的版本
这是完整的图片：
Firefox中的超酷网格覆盖功能：在Firefox开发工具中，当您检查网格容器时，CSS声明中有一个微小的网格图标。
单击时，它会在页面上显示网格的轮廓。
