网格缩略图垂直与顶部对齐
网格缩略图垂直与顶部对齐
提问于 2019-09-08 18:15:34
是否可以像flexboxes一样在顶部垂直对齐网格项目？
而无需手动定义li的网格跨度属性。
我希望布局适用于任意数量的列表元素
ul {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 300px;
border: 10px solid green;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
grid-auto-rows: minmax(25px, auto);
justify-items: top;
grid-gap: 1em;
grid-row-gap: 1em;
position: relative;
}
li {
background: red;
display: block;
min-width: 100%;
max-height: 25px;
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
回答 1
Stack Overflow用户
发布于 2019-09-08 19:24:04
https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
CSS align-content属性设置沿flexbox的交叉轴或网格的块轴的内容项之间和周围的空间分布。
ul {
width: 400px;
height: 300px;
border: 10px solid green;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
grid-auto-rows: minmax(25px,auto);
align-content:start;
grid-gap: 1em;
}
li {
background: red;
display: block;
min-width: 100%;
max-height: 25px;/* ?? */
}
ul {
counter-reset: items
}
li::before {
counter-increment: items;
content: counter(items);
}
* {
padding: 0
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57841009
复制相关文章
相似问题
腾讯云开发者
