预览图：

原理

合理使用 Grid 的属性：

1. display:设置为grid指明当前容器为Grid布局
2. grid-template-columns: 定义每一列的列宽（百分比或绝对单位）
3. grid-template-rows: 定义每一行的行高（百分比或绝对单位）
4. grid-auto-rows：用来设置多余网格的行高 【瀑布流行数不确定时】
5. column-gap：用于设置列间距
6. grid-row-start：上边框所在的水平网格线
7. grid-row-end：下边框所在的水平网格线
8. grid-column-start：左边框所在的垂直网格线
9. grid-column-end：右边框所在的垂直网格线

做一个简单的网格布局，其实不是那么复杂！

预览图：

具体的源码可以访问另一篇文章：Grid 实现九宫格布局 - 今日头条

那么什么是网格线呢?

划分网格的线，称为网格线。水平网格线划分出行，垂直网格线划分出列。正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

比如一个 3 x 3 的网格，共有4根水平网格线和4根垂直网格线（如上面的九宫格布局）。

如何操控这些网格线呢？

这时候就要说上面那四个属性了，它们可以接收：

• auto：表示自动放置
• 自定义名称：可以给予网格线一个名称，并在此处引用
• 网格线索引: 代表第几条网格线(从1开始)
• span + 数字: 表示上下边框或左右边框跨越多少网格

简单用伪 CSS 代码举例：

.item{
    height:100%;
}
.item:first-child{
    grid-row-start:1;
    grid-row-end:span 2;
}

有了这些基础，就能看下面完整代码了！

完整代码