CSSGrid中`grid-gap`已弃用，应使用`gap`属性控制间距。

本文深入解析CSS Grid布局中`grid-gap`属性的正确用法，强调其仅控制网格容器内部单元格间的间距，而非独立网格容器之间的间距。通过示例代码，展示如何创建父级网格容器，利用`gap`属性（`grid-gap`的简写）实现多个网格项之间的间距，从而优化页面布局。文章详细讲解了如何使用`grid-template-columns`实现响应式列布局，并阐述了`gap`属性在Grid和Flexbox布局中的通用性。掌握`grid-gap`的作用范围，有助于开发者构建清晰、易维护的CSS代码，避免混合布局，充分发挥CSS Grid的强大功能，创建响应式复杂页面布局。

本文旨在解析CSS Grid布局中grid-gap属性的正确使用方式，澄清其作用范围仅限于网格内部单元格之间的间距，而非不同网格容器之间的间距。我们将通过具体示例，演示如何构建包含多个网格项的父级网格容器，并在此容器上正确应用gap（或grid-gap）属性，从而实现预期的网格间距效果，优化布局的可读性和维护性。

理解 grid-gap 的作用范围

在CSS Grid布局中，grid-gap（或其简写形式gap）是一个非常实用的属性，用于在网格行和列之间创建间距。然而，许多开发者初次接触时可能会对其作用范围产生误解。核心概念是：grid-gap仅在其声明的网格容器内部生效，它定义的是该网格容器所包含的网格项（grid items）之间的间距，而不是独立网格容器之间的间距。

考虑以下场景：如果页面上有多个独立的div元素，每个div都被设置为display: grid;，那么对这些div应用grid-gap，只会影响它们各自内部的布局，而不会在这些div相互之间产生间距。换句话说，每个div.autota本身是一个独立的网格，grid-gap作用于div.autota内部的子元素（如img和b标签）之间。这就是为什么在原始代码中，即使设置了grid-gap: 10px;，多个.autota元素之间却没有出现预期的水平或垂直间距。

正确实现网格间距

要实现多个独立块（例如多个产品卡片）之间的间距，并利用CSS Grid的强大布局能力，正确的做法是引入一个父级网格容器。这个父级容器将承载所有需要排列和间隔的子元素（即你的.autota元素），并由它来定义整体的网格布局和间距。

以下是实现这一目标的步骤和示例代码：

1. 创建父级网格容器： 在HTML结构中，将所有.autota元素包裹在一个新的div中，例如命名为grid-container。
2. 对父级容器应用Grid布局： 将display: grid;和gap属性应用于这个grid-container。
3. 定义父级网格的列和行： 使用grid-template-columns和grid-template-rows（如果需要）来定义父级网格的结构。例如，可以使用repeat(auto-fit, minmax(320px, 1fr))来实现响应式的列布局，确保每个.autota元素至少有320px宽，并根据可用空间自动调整列数。
4. 调整子元素样式： 移除.autota元素上与外部布局相关的CSS属性，如float和width（如果其宽度由父级网格控制）。如果.autota内部也需要网格布局，可以保留其display: grid;和内部的gap属性。

示例代码与解析

假设我们希望将多个.autota卡片排列成多列，并在它们之间添加间距。

HTML 结构调整：

  

    
    2014 FORD FOCUS 1.0 TITANIUM 5dr silver £6999
  
  

    
    1999 NISSAN MAXIMA 3.0 V6 GXE 4dr blue £500
  
  

    
    1983 CHRYSLER E-CLASS 2.2 4dr white, classic car £3290
  
  

    
    2014 FORD FOCUS 1.0 TITANIUM 5dr silver £6999
  
  

    
    1999 NISSAN MAXIMA 3.0 V6 GXE 4dr blue £500
  
  

    
    1983 CHRYSLER E-CLASS 2.2 4dr white, classic car £3290
  

CSS 样式调整：

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/* 定义父级网格容器 */
.grid-container {
  display: grid;
  /* 自动填充列，每列最小320px，最大1fr（占据剩余空间） */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  /* 设置行和列之间的间距 */
  gap: 20px; /* 推荐使用更通用的 gap 属性，它同时设置 grid-row-gap 和 grid-column-gap */
  padding: 20px; /* 容器内边距，避免内容紧贴边缘 */
}

/* 定义 .autota 内部的布局 */
div.autota {
  display: grid; /* .autota 自身仍然可以是一个网格容器 */
  grid-template-rows: auto 1fr; /* 图片占据自动高度，文本占据剩余空间 */
  gap: 10px; /* .autota 内部图片和文本之间的间距 */
  border: 2px solid;
  /* 移除外部 float 和固定 width，让父级网格控制其大小和排列 */
  /* width: 320px; /* 移除 */
  /* float: left; /* 移除 */
  /* margin-bottom: 15px; /* 如果需要，可以保留垂直方向的外部间距，但更推荐由父级 grid 的 gap 来统一管理 */
}

div.autota img {
  width: 100%; /* 确保图片在 .autota 内部自适应宽度 */
  height: auto;
  display: block; /* 移除图片底部默认间隙 */
}

/* 清除浮动不再需要，因为已经切换到 Grid 布局 */
/* .clear { clear: both; } */

解析：

• grid-container现在是主网格，它负责所有.autota元素的整体布局。
• grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 使得.autota元素能够自适应地在多列中排列，每列至少320px宽。
• gap: 20px; 应用在grid-container上，在每个.autota元素之间创建了20px的水平和垂直间距。
• div.autota内部仍然可以保持display: grid;，用于管理图片和文本之间的布局，其内部的gap: 10px;则控制图片和文本之间的间距。这展示了Grid布局的嵌套能力。

注意事项与总结

1. 层级与作用域： 始终牢记gap（或grid-gap）作用于其声明的网格容器内部，用于分隔其直接的网格项。
2. gap vs grid-gap： gap是grid-row-gap和grid-column-gap的简写，并且在现代CSS中，gap属性不仅适用于Grid布局，也适用于Flexbox布局，因此推荐优先使用gap。
3. 布局策略： 在设计复杂布局时，将页面分解为不同的网格区域，并为每个区域定义其父级网格，是实现清晰、可维护CSS代码的关键。
4. 避免混合布局： 尽量避免在同一组元素上混合使用float和Grid布局，因为它们是不同的布局范式，可能导致不可预测的行为。一旦切换到Grid，就应充分利用其特性。

通过理解gap属性的作用域并正确构建嵌套的网格结构，开发者可以更有效地利用CSS Grid的强大功能，创建出响应式且易于管理的复杂页面布局。

以上就是《CSSGrid中`grid-gap`已弃用，应使用`gap`属性控制间距。》的详细内容，更多关于的资料请关注golang学习网公众号！