如何將網格元素放置在容器的尾部
P粉387108772
2023-08-28 13:48:05
<p>我有一個網格容器，我希望我的項目放在底部。 </p>
<p>我有這個實際的</p>
<p>我想要這樣的
期望</p>
<p>
<pre class="brush:css;toolbar:false;">.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;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
</p>
<p>PS：我已經嘗試了place-items: end;和align-items: end;</p>
您可以使用
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; }