CSS Grid布局：正确使用gap属性创建网格间距

文章不知道大家是否熟悉？今天我将给大家介绍《CSS Grid布局：正确使用gap属性创建网格间距 》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

CSS Grid的gap属性（或grid-gap）用于定义网格单元格之间的间距，而非网格容器自身之间的间距。当发现gap未在预期位置生效时，通常是因为将其应用于了独立的网格容器而非其父级容器。要实现网格容器之间的间距，应将这些容器包裹在一个更大的父级网格中，并对该父级网格应用gap属性，从而正确管理整体布局的视觉间距。

理解 gap 属性的作用范围

在CSS Grid布局中，gap（旧称grid-gap、grid-row-gap、grid-column-gap）属性是用来控制网格内部行与列之间间距的。这意味着它只对其声明的网格容器的直接子元素（即网格项）之间的空间产生影响。

考虑以下原始代码片段：

div.autota {
  display: grid;
  width: 320px;
  border: 2px solid;
  columns: 2; /* 注意：此属性属于CSS多列布局，与Grid无关 */
  grid-gap: 10px; /* 应用于 div.autota 内部的网格项 */
  margin-bottom: 15px;
  float: left;
}

<div class="autota">
  <img src="...">
  <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
</div>

在这个例子中，div.autota 被设置为 display: grid，其内部的 标签和 标签成为了这个网格的直接子项。因此，grid-gap: 10px; 会在 和 之间创建10像素的间距。如果将 grid-gap 值调大（例如 100px），这种内部间距会变得更加明显。

然而，原始问题是希望在不同的 div.autota 元素之间创建间距，而不是在每个 div.autota 内部。由于每个 div.autota 都是一个独立的网格容器，grid-gap 无法影响它们彼此之间的外部空间。float: left; 和 margin-bottom: 15px; 才是控制这些独立块级元素间距的传统方式。

正确实现网格容器间的间距

要实现多个网格容器（例如这里的 div.autota 实例）之间有规律的间距，最有效的方法是将它们包裹在一个更大的父级网格容器中。然后，将 display: grid 和 gap 属性应用于这个父级容器。这样，每个 div.autota 就会成为父级网格的一个网格项，并且 gap 属性将控制这些网格项之间的间距。

以下是修改后的CSS和HTML示例：

HTML结构调整：

首先，创建一个新的父级容器来包裹所有的 div.autota 元素。

<div class="gallery-wrapper">
  <div class="autota">
    <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg">
    <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
  </div>
  <div class="autota">
    <img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg">
    <b>1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</b> blue <b>£500</b>
  </div>
  <div class="autota">
    <img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg">
    <b>1983 CHRYSLER E-CLASS 2.2 4dr</b> white, classic car <b>£3290</b>
  </div>
  <!-- 更多 div.autota 元素 -->
</div>

CSS样式调整：

对新的父级容器 .gallery-wrapper 应用 display: grid 和 gap。同时，移除 div.autota 上不再需要的 float 和 margin-bottom 属性，因为这些间距现在由父级网格统一管理。columns: 2; 属性也应移除，因为它与CSS Grid无关，并且可能导致布局混淆。

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

/* 父级容器：控制 div.autota 之间的布局和间距 */
.gallery-wrapper {
  display: grid;
  /* 定义列模板，例如每列320px，自动填充，或固定列数 */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  /* 定义行和列之间的间距 */
  gap: 15px; /* 例如，水平和垂直方向都间隔15px */
  max-width: 1000px; /* 限制整体宽度，根据需要调整 */
  margin: 0 auto; /* 居中显示 */
}

/* 子项：每个 div.autota 仍然可以是一个内部网格 */
div.autota {
  display: grid; /* 保持内部 img 和 b 之间的网格布局 */
  width: 320px; /* 或者让父网格的 grid-template-columns 来决定宽度 */
  border: 2px solid;
  /* 移除 float 和 margin-bottom，因为父级网格已管理间距 */
  /* float: left; */
  /* margin-bottom: 15px; */

  /* 如果内部 img 和 b 之间仍需要间距，保留或调整 */
  gap: 10px; /* 控制 img 和 b 之间的间距 */
  /* 确保 img 和 b 是网格项 */
  grid-template-rows: auto 1fr; /* 确保图片占一行，文本占一行 */
  align-items: start; /* 文本从顶部对齐 */
}

div.autota img {
  width: 100%; /* 图片宽度适应其父容器（autota） */
  height: auto;
  display: block; /* 移除图片底部可能存在的额外空间 */
}

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

通过上述调整，.gallery-wrapper 成为了一个网格容器，其子项是所有的 div.autota。对 .gallery-wrapper 应用 gap: 15px; 将确保每个 div.autota 之间都有15像素的水平和垂直间距，从而实现预期的布局效果。

总结与注意事项

• gap 属性的范围： 始终记住 gap (或 grid-gap) 仅在其声明的网格容器内部生效，用于控制其直接网格项之间的间距。
• 嵌套网格： 当你需要控制一组网格容器之间的间距时，最常见且推荐的做法是将它们作为子项放入一个更大的父级网格中。
• 布局属性的兼容性： float 和 margin 是传统的块级布局方式，而 display: grid 则是一种全新的布局范式。在切换到Grid布局时，通常需要移除或重新评估传统的布局属性，以避免冲突或冗余。
• columns 属性： columns 属性是CSS Multi-column Layout的一部分，用于将内容分割成多列，与CSS Grid布局的 grid-template-columns 概念不同，请勿混淆。

正确理解 gap 属性的作用范围，并结合嵌套网格的策略，可以高效地构建复杂且响应式的CSS Grid布局。

今天关于《CSS Grid布局：正确使用gap属性创建网格间距 》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！