CSS Grid 网格布局教程(3容器属性:定义行和列的间距)

君山

3.3 grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

1. .container {
   
2.   grid-row-gap: 20px;
   
3.   grid-column-gap: 20px;
   
4. }

复制代码

上面代码中，grid-row-gap用于设置行间距，grid-column-gap用于设置列间距。



grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

1. grid-gap: <grid-row-gap 行间距> <grid-column-gap 列间距>;

复制代码

因此，上面一段 CSS 代码等同于下面的代码。

1. .container {
   
2.   grid-gap: 20px 20px;
   
3. }

复制代码

如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。