如何摆脱网格项底部的额外空格？
问题描述 投票：2回答：2
我的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>2个回答
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>0
投票
投票
如何让图像下方的部分仅占用下一个和任何填充所需的空间，而不是更多？
图像后面的网格项是一个内部带有标题（h4）的div。此标题具有由浏览器设置的默认顶部和底部边距。
使用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?
最新问题
- 如何在 PostgreSQL 选择查询中从时间戳获取日期和时间？
- JsxGraph 与 React
- 我在 Java JDBC 代码中的 try 语句有问题
- 对 TradingView 中的枢轴点指标进行小修改
- 将嵌套 For 循环转换为字典推导式
- 如何从 Dockerfile 有条件地为 M1 Mac Silicon 或 AMD 构建 docker 映像？
- 在cmake中，如何将多个列表作为cmake函数参数传递
- 如果用户未从 Livewire 安装方法登录，为什么重定向到其他页面会引发错误？
- 错误：RPC失败； HTTP 500 curl 22 请求的 URL 返回错误：500
- 我可以从二头肌脚本中的 az 部署命令行获取位置吗？
- 在带引号的字符串中展开宏[重复]
- 使用 PHP 从 Drupal 中的路径获取文件
- MongoDB Atlas AWS CDK 部署错误“不存在区域”
- 如何在列定义列表中使用动态名称？
- 计算整数中数字“7”的单返回递归解决方案
- Flutter - 如何使用网格 UI 制作省略的小部件
- 在二维数组中绘制椭圆
- 带箭头的分页不适用于 typecipt
- VsCode 中基于 Python 的 Azure 函数本地调试因 grpc.FutureTimeoutError() 失败
- CTRL+X / CTRL+C 控件破坏代码
© www.soinside.com 2019 - 2024. All rights reserved.