时间戳

首页 > 解决方案 > CSS Grid - 在我的图像下方显示大量底部边距

html - CSS Grid - 在我的图像下方显示大量底部边距

问题描述

在移动设备上检查我的网格后，我的 div 下方有一个巨大的底部边距。我不确定是什么原因造成的。这是我的意思的图像：

图片

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 40px 40px;
  max-width: 100%;
  @include for-tablet--large {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
}
<div class="grid-container">
  <div class="activation-square__title" data-activation-square="1"><img src="/wp-content/uploads/activation-square-1-title.jpg" alt=""></div>
  <div class="activation-square__title" data-activation-square="2"><img src="/wp-content/uploads/activation-square-2-title.jpg" alt=""></div>
  <div class="activation-square__title" data-activation-square="3"><img src="/wp-content/uploads/activation-square-3-title.jpg" alt=""></div>
  <div class="activation-square__title" data-activation-square="4"><img src="/wp-content/uploads/activation-square-4-title.jpg" alt=""></div>
  <div class="activation-square__title" data-activation-square="5"><img src="/wp-content/uploads/activation-square-5-title.jpg" alt=""></div>
  <div class="activation-square__title" data-activation-square="6"><img src="/wp-content/uploads/activation-square-6-title.jpg" alt=""></div>
  <div class="activation-square__title" data-activation-square="7"><img src="/wp-content/uploads/activation-square-7-title.jpg" alt=""></div>
  <div class="activation-square__title" data-activation-square="8"><img src="/wp-content/uploads/activation-square-8-title.jpg" alt=""></div>
  <div class="activation-square__title" data-activation-square="9"><img src="/wp-content/uploads/activation-square-9-title.jpg" alt=""></div>
  <div class="activation-square__title" data-activation-square="10"><img src="/wp-content/uploads/activation-square-10-title.jpg" alt=""></div>
  <div>
    <h3 class="has-text-color" style="color:#fb61a6">
      Title here
    </h3>
    <div class="wp-block-buttons">
      <div class="wp-block-button">
        <a class="wp-block-button__link has-background-color has-text-color has-background" href="#" style="background-color:#63d9cd">ACCESS NOW</a>
      </div>
    </div>
  </div>
</div>

标签： htmlcsscss-grid

解决方案

塔科希是对的。解决了。我刚刚grid-template-rows完全删除，问题就消失了。

推荐阅读