CSS Gap 属性

CSS Gap 属性旨在简化基于网格布局的布局设计。它允许您在网格行和列之间指定间距，就像在表格单元格之间指定间距一样。

语法

grid-row-gap: <length> | <percentage> | normal;
grid-column-gap: <length> | <percentage> | normal;
gap: <grid-row-gap> <grid-column-gap>? | <length> | <percentage> | normal;

• grid-row-gap 用于设置网格行之间的间距。
• grid-column-gap 用于设置网格列之间的间距。
• gap 属性是 grid-row-gap 和 grid-column-gap 的组合，也可以仅用于指定一个 layout 中的间距。

用法

基本用法

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

在上面的例子中，我们定义了一个网格容器，它有三个等宽的列。我们使用 gap 属性将它们之间的间隔设置为 10 像素。

不同的行和列间隔

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px 20px;
}

在上面的例子中，我们定义了一个网格容器，它有三个同宽的列和两个同高的行。我们使用 gap 属性将行和列之间的间距设置成了不同的值。

结合 auto-fit 和 minmax

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

在上面的例子中，我们使用 repeat(auto-fit, minmax(100px, 1fr)) 来创建自适应的网格布局。这意味着我们的网格容器将适应每个项目的大小，并尽可能多地拥有列。我们使用 grid-gap 属性来设置网格行和列之间的间距。

浏览器兼容性

CSS Gap 属性目前的兼容性还不是非常完善。请确保在使用之前查看当前浏览器的兼容性。

• Chrome: 84+
• Edge: 84+
• Firefox: 75+
• Safari: 14+

汇总

CSS Gap 属性是一项非常有用的新特性，它允许我们更轻松地创建网格布局，并与其他 CSS 属性（如 minmax、auto-fit 等）结合使用。虽然在不同浏览器上的兼容性还有待改善，但该属性已被广泛使用，并被认为是未来 Web 布局的一部分。