编程马·菜鸟教程

Appearance

第6章：网格间距设置 ​

在本节中，我们将介绍如何设置网格单元格之间的间距，这是Grid布局的重要功能之一。

6.1 gap：设置网格单元格之间的间距 ​

gap属性用于设置网格单元格之间的间距，是row-gap和column-gap的简写。

语法 ​

css
.container {
  gap: <row-gap> <column-gap>;
}

/* 简写形式（行间距和列间距相同） */
.container {
  gap: <gap>;
}

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>gap属性</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 100px);
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .gap-10 {
      gap: 10px;
    }
    
    .gap-20 {
      gap: 20px;
    }
    
    .gap-different {
      gap: 15px 25px;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>gap属性示例</h1>
  
  <h2>gap: 10px</h2>
  <div class="container gap-10">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>gap: 20px</h2>
  <div class="container gap-20">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>gap: 15px 25px</h2>
  <div class="container gap-different">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

6.2 row-gap：单独设置行与行之间的间距 ​

row-gap属性用于单独设置行与行之间的间距。

语法 ​

css
.container {
  row-gap: <gap>;
}

6.3 column-gap：单独设置列与列之间的间距 ​

column-gap属性用于单独设置列与列之间的间距。

语法 ​

css
.container {
  column-gap: <gap>;
}

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>row-gap和column-gap</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 100px);
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .row-gap {
      row-gap: 20px;
    }
    
    .column-gap {
      column-gap: 30px;
    }
    
    .item {
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>row-gap和column-gap示例</h1>
  
  <h2>row-gap: 20px</h2>
  <div class="container row-gap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>column-gap: 30px</h2>
  <div class="container column-gap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

6.4 实操：用gap替代margin，快速设置均匀网格间距 ​

传统方法：使用margin ​

css
.item {
  margin: 10px;
}

.container {
  margin: -10px;
}

现代方法：使用gap ​

css
.container {
  gap: 20px;
}

代码示例对比 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>gap vs margin</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 100px);
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .margin {
      margin: -5px;
    }
    
    .margin .item {
      margin: 5px;
    }
    
    .gap {
      gap: 10px;
    }
    
    .item {
      background-color: #2ecc71;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>gap vs margin</h1>
  
  <h2>使用margin</h2>
  <div class="container margin">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>使用gap</h2>
  <div class="container gap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <p>使用gap更加简洁，不需要处理边缘元素的margin</p>
</body>
</html>

6.5 与Flex布局gap的区别与联系 ​

联系 ​

  • 语法相同：都使用gap、row-gap和column-gap属性
  • 作用相似：都用于设置项目之间的间距

区别 ​

  • Flex布局：gap设置的是Flex项目之间的间距
  • Grid布局：gap设置的是网格单元格之间的间距

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>Flex gap vs Grid gap</title>
  <style>
    .flex-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      width: 100px;
      height: 100px;
      background-color: #9b59b6;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Flex gap vs Grid gap</h1>
  
  <h2>Flex布局 gap</h2>
  <div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  
  <h2>Grid布局 gap</h2>
  <div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

6.6 兼容性说明 ​

gap属性在现代浏览器中得到了广泛支持，包括：

  • Chrome 66+
  • Firefox 61+
  • Safari 12.1+
  • Edge 79+

对于需要支持旧浏览器的项目，可以使用以下回退方案：

css
.container {
  /* 现代浏览器 */
  gap: 20px;
  
  /* 旧浏览器回退 */
  margin: -10px;
}

.container > * {
  /* 旧浏览器回退 */
  margin: 10px;
}

实操练习 ​

  1. 创建一个3列3行的网格，设置不同的gap值
  2. 尝试使用row-gap和column-gap设置不同的行间距和列间距
  3. 对比使用gap和margin的区别
  4. 在Flex布局和Grid布局中使用gap，观察它们的相似之处和不同之处

通过本节的学习，你已经掌握了如何设置网格单元格之间的间距。gap属性是Grid布局的重要功能之一，它可以帮助你快速设置均匀的网格间距，使布局更加美观。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建