html - 如何消除网格项底部的多余空白？

标签 html css css-grid

我的 CSS 网格元素底部有很多空白，我想找出原因。我将图像设置为容器的 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

最佳答案

您需要将高度设置为 40%(以 px 或 rem 或 em 为单位)，因为 40% 的计算方式不同，对于响应式，您可以使用 % 或 vh 但设置高度px 或 rem 或 em 更适合这种情况。

.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>

关于html - 如何消除网格项底部的多余空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55767412/

上一篇：html - CSS:必须使用 "click"初始化悬停效果

下一篇：javascript - 通过在 POST 请求中向私有(private) API 发送 HTML 表单来获取 JWT

相关文章：

jquery - 表格单元格中的 Kendo 验证显示在顶部(z-index)

javascript - 如何正确包含dojo？

html - 多个文本更改动画不起作用

javascript - 有没有办法直接访问 CSS 网格中自动放置元素的实际网格坐标？

javascript - 在文本框javascript中设置光标位置

javascript - 如何在css3中结束一列图像

javascript - 使用 getBoundingClientRect() 问题计算边界框 swift top, left

html - 网格列值 1/1 和 1/2 之间有什么区别？

css - 少编译网格列的问题

html - 菜单问题

©2024 IT工具网  联系我们