我有一个网格容器,我希望我的项目放在底部。
我有这个实际的
我想要这样的 期望
.container {
display: grid;
grid-template-columns: repeat(14, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-gap: 8px;
width: 200px;
background: blue;
}
.item {
background-color: red;
color: white;
}
.item-1 {
grid-column: span 5;
grid-row: span 6;
}
.item-2 {
grid-column: span 4;
grid-row: span 5;
}
.item-3 {
grid-column: span 3;
grid-row: span 4;
}
<div class="container"> <div class="item item-1">项目 1</div> <div class="item item-2">项目 2</div> <div class="item item-3">项目 3</div> </div>
PS:我已经尝试了place-items: end;和align-items: end;
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您可以使用
grid-column和grid-row的两个值start / end语法来确定项目的起始和结束位置。例如,
grid-row: 2 / span 3;将从第2个网格线开始,跨越3个网格线,直到第5个网格线。.container { display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(6, 1fr); grid-gap: 8px; width: 200px; background: blue; } .item { background-color: red; color: white; } .item-1 { grid-column: span 5; grid-row: span 6; } .item-2 { grid-column: 6 / span 4; grid-row: 2 / span 5; } .item-3 { grid-column: 10 / span 3; grid-row: 3 / span 4; }