CSS Grid 网格布局(入门)- 网格单元间距 grid-column-gap

grid-column-gap 属性设置列间距。grid-row-gap 属性设置行间距。理解为网格线有了尺寸。这两个属性设置在容器上。

.wrap{
	display: grid;
	grid-template-columns:50px 50px 150px;
	grid-template-rows:60px 60px 60px;
	grid-row-gap: 5px;
	grid-column-gap: 20px;
}
grid_网格单元间距_grid-column-gap 7-1

如图中虚线。

CSS Grid 网格布局 - gap 简写

gap 是 grid-row-gap 和 grid-column-gap 的简写。

gap: <grid-row-gap> <grid-column-gap>

grid-row-gap: 5px;
grid-column-gap: 20px;
	
/* 以上等同于 */
gap:5px 20px;

如果第二个值没有写,浏览器就会默认第二个值等于第一个值。

JavaScript 语法:

object.style.gridRowGap = "10px" ;
object.style.gridColumnGap = "10px" ;