如何摆脱网格项底部的多余空格？答案

【问题标题】：How do I get rid of extra whitespace at the bottom of my grid-item?如何摆脱网格项底部的多余空格？
【发布时间】：2019-04-19 20:20:19
【问题描述】：

我的 CSS Grid 项目底部有很多空白，我想弄清楚原因。我将图像设置为容器的 40% 高度，其高度设置为 100% 高度。我已经明白，默认情况下，网格项目的高度（连续）是其内容的高度。如果隐式行中的所有项目只跨越一行，则它们应该具有相同的高度，对我来说就是这种情况。

如何让图像下方的部分仅占用下一个和任何填充所需的空间，而不占用更多空间？

.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: min-content;
  grid-gap: 1rem;

}

.card {
  height: 100%;
  border: 1px solid black;
}

.main-img {
  display: block;
  object-fit: cover;
  height: 40%;
  width: 100%;
}

.author-img {
  display: none;
}

<body>
    <div class="cards">
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554142918-2c055786cf67?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The challenges & rewards of being vulnerable</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1553994535-aa6c2ee8cfc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>Content strategy best practices vs reality with Alex of Scripted</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554283048-23c1133c646e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content"><h4>Blogging</h4>
          <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
          <div class="metadata">
            <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
            <div>
              <p class="author-name">By Alex</p>
              <p class="article-date">on April 16th, 2019</p>
            </div>
          </div></div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554302006-5c11782b1f69?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt=""> 
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The challenges & rewards of being vulnerable</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1553586633-929ec02f4fb4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>Content strategy best practices vs reality with Alex Barron of Scripted</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
    </div>
</body>

CodePen

【问题讨论】：

这都是上一张猫图片造成的问题

标签： html css css-grid

【解决方案1】：

您需要在 px or rem or em 中设置 40% 的高度，因为 40% 的计算方式不同，为了响应，您可以使用 % or vh 但在 px or rem or em 中设置的高度更适合 this 的情况。

.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: min-content;
  grid-gap: 1rem;
}

.card {
  border: 1px solid black;
}

.main-img {
  display: block;
  object-fit: cover;
  height: 15rem;
  width: 100%;
}

.author-img {
  display: none;
}

<body>
    <div class="cards">
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554142918-2c055786cf67?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The challenges & rewards of being vulnerable</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1553994535-aa6c2ee8cfc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>Content strategy best practices vs reality with Alex of Scripted</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554283048-23c1133c646e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content"><h4>Blogging</h4>
          <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
          <div class="metadata">
            <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
            <div>
              <p class="author-name">By Alex</p>
              <p class="article-date">on April 16th, 2019</p>
            </div>
          </div></div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1554302006-5c11782b1f69?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt=""> 
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The challenges & rewards of being vulnerable</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1553586633-929ec02f4fb4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>Content strategy best practices vs reality with Alex Barron of Scripted</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
        <article class="card">
          <img class="main-img" src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <div class="card-content">
            <h4>Blogging</h4>
            <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
            <div class="metadata">
              <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
              <div>
                <p class="author-name">By Alex</p>
                <p class="article-date">on April 16th, 2019</p>
              </div>
            </div>
          </div>
        </article>
    </div>
</body>

【讨论】：

谢谢。这解决了这个问题。但我想更多地了解“40% 的计算方式不同”，这样我才能理解？你或其他人能向我解释这个吗？
40% 是根据您的视口计算的，当您调整它的大小时，您的高度会增加和减少，但大多数时候高度不是以 % 为单位测量的，因为您需要使用视口 vh vw跨度>

【解决方案2】：

如何让图像下方的部分仅占用下一个和任何填充所需的空间，而不占用更多空间？

图片后面的网格项是一个 div，里面有一个标题 (h4)。此标题具有浏览器设置的默认顶部和底部边距。

用h4 { margin-top: 0 }覆盖这个默认值

.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: min-content;
  grid-gap: 1rem;
}

.card {
  height: 100%;
  border: 1px solid black;
}

.main-img {
  display: block;
  object-fit: cover;
  height: 40%;
  width: 100%;
}

.author-img {
  display: none;
}

h4 {
  margin-top: 0;
}

<div class="cards">
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1554142918-2c055786cf67?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <!--           <h1>Alex</h1> -->
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>The challenges & rewards of being vulnerable</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1553994535-aa6c2ee8cfc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>Content strategy best practices vs reality with Alex of Scripted</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1554283048-23c1133c646e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1554302006-5c11782b1f69?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>The challenges & rewards of being vulnerable</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1553586633-929ec02f4fb4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>Content strategy best practices vs reality with Alex Barron of Scripted</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
  <article class="card">
    <img class="main-img" src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
    <div class="card-content">
      <h4>Blogging</h4>
      <h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
      <div class="metadata">
        <img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
        <div>
          <p class="author-name">By Alex</p>
          <p class="article-date">on April 16th, 2019</p>
        </div>
      </div>
    </div>
  </article>
</div>

“block-start”是横写模式的顶部。 “inline-start”是文本开始的一侧。它是 LTR 的左侧。 “-end”是指对面。 source
要了解为什么 h4 上边距不保留在父 div 内，请阅读边距折叠。见这里：Why is an element with position: fixed moving with a non-positioned sibling?

【讨论】：