水平与垂直间隔设置，一文读懂 grid-row-gap 与 grid-column-gap

2023-11-22 12:10:56

刚接触 CSS 布局的人，通常会使用 float 布局或 flex 布局，等水平与垂直间隙需求增加时，我们就会发现这两种布局的无力之处，接下来我们就学习 grid 网格布局的其中两个属性 grid-row-gap 和 grid-column-gap。这两个属性可以让我们设置网格容器中元素之间的间隙。

grid-row-gap

grid-row-gap 属性用于设置网格容器中连续两行的间距。

语法：

grid-row-gap: <length>

其中，length 可以是任何 CSS 长度值，例如 px、em、rem、% 等。

grid-column-gap

grid-column-gap 属性用于设置网格容器中连续两列的间隙。

语法：

grid-column-gap: <length>

其中，length 可以是任何 CSS 长度值，例如 px、em、rem、% 等。

grid-gap

grid-gap 属性是 grid-row-gap 和 grid-column-gap 的简写属性。它可以同时设置网格容器中连续两行的间隙和连续两列的间隙。

语法：

grid-gap: <length>

其中，length 可以是任何 CSS 长度值，例如 px、em、rem、% 等。

实例

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
}
</style>