未应用网格间隙 - CSS 网格

Question

我正在使用 html 和 css 为一家小型企业构建一个网站，稍后我会将其转换为 WordPress。我遇到的问题是服务卡上没有应用间隙。我的猜测是，这与父级（.services）上应用的宽度/最大宽度有关。我该如何解决？ Codepen 链接：https://codepen.io/gbopola/pen/zYepdWo

/* services section */

.services {
  width: 90%;
  max-width: 1300px;
  margin: 15rem auto 5rem auto;
}

.services-card-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  background: #f8f9fa;
}

<!-- Services Section -->
<section class="services">
  <div class="services-header">
    <h1>Our Services</h1>
    <p class="services-subtext">
      Our diverse range of services are designed to meet the unique needs of businesses and government agencies in Nigeria. Our expert consultants bring a wealth of experience to provide strategic solutions.
    </p>
  </div>
  <div class="services-card-wrapper">
    <div class="service-card">
      <img src="./images/wifi.svg" />
      <h2>Telecommunication</h2>
      <p>
        Stay connected and efficient with our telecommunication solutions. From infrastructure development to network optimization, we enhance your communication capabilities.
      </p>
    </div>
    <div class="service-card">
      <img src="./images/book-open.svg" />
      <h2>Specialist Training</h2>
      <p>
        Invest in your team's skills and knowledge. Our specialized training programs cover a wide range of topics, ensuring your workforce is equipped for the challenges of today and tomorrow.
      </p>
    </div>
    <div class="service-card">
      <img src="./images/users.svg" />
      <h2>Specialist Recruitment</h2>
      <p>
        Build a high-performing team with our specialist recruitment services. We identify and place top talent in your organization, matching skills and culture for long-term success.
      </p>
    </div>
  </div>
</section>

Answer 1

该问题可能与 .services-card-wrapper 中的 grid-template-columns 属性设置为重复（3, 1fr）有关，这意味着每列占用可用空间的相等部分。但是，如果三列的组合宽度超过可用宽度，则网格可能无法创建预期的间隙。

您可以调整 grid-template-columns 属性并确保列不超过可用宽度，如下所示。

.services-card-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
  background: #f8f9fa;
}

自动调整：自动调整值将创建尽可能多的列，以适合可用空间。
minmax(250px, 1fr)：这可确保每列的最小宽度为 250 像素，最大宽度为 1 个分数单位 (1fr)。