在代碼中box-2，box-3行高自動拉伸到box-1行中最高項目的高度。box-2和列中有額外的間隙box-3。box-5我希望這個空白由第二行中的來填補。小提琴.container { display: grid; grid-template-columns: 20% 40% 40%; grid-gap: 20px;}.container > div { border: 1px solid red;}.box-1 { background-color: lightgreen; height: 300px;}.box-2 { background-color: lightsalmon; height: 150px;}.box-3 { background-color: lightsalmon; height: 150px;}.box-4 { background-color: lightskyblue; height: 500px;}.box-5 { background-color: lightseagreen; grid-column: 2/-1;}<div class="container"> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> <div class="box-4"></div> <div class="box-5"></div></div>這是我正在尋找的輸出
2 回答
不負相思意
TA貢獻1777條經驗 獲得超10個贊
您直接設置網格項的高度，而不是在網格容器上定義任何行。因此，網格算法必須創建行來容納網格區域。它只需要創建兩行即可完成布局。這就是為什么框 2 和 3 下方有一個很大的間隙?？?1 最高，它設置頂行的高度。
您想要的布局至少需要三行。
嘗試這種方法：在容器級別設置行（和高度），然后設置網格區域。
.container {
display: grid;
grid-template-columns: 1fr 2fr 2fr;
grid-template-rows: repeat(3, 150px);
grid-gap: 10px;
}
.box-1 {
grid-column: 1;
grid-row: 1 / span 2;
background-color: lightgreen;
}
.box-2 {
grid-column: 2;
grid-row: 1;
background-color: lightsalmon;
}
.box-3 {
grid-column: 3;
grid-row: 1;
background-color: lightsalmon;
}
.box-4 {
grid-column: 2 / -1;
grid-row: 2 / 4;
background-color: lightskyblue;
}
.box-5 {
grid-column: 1;
grid-row: 3;
background-color: lightseagreen;
}
<div class="container">
<div class="box-1">1</div>
<div class="box-2">2</div>
<div class="box-3">3</div>
<div class="box-4">4</div>
<div class="box-5">5</div>
</div>
如果您需要更多選項來調整網格區域的大小，請增加行/列數。
例如，代替這個：
grid-template-rows: repeat(3, 150px)
...你可以這樣做：
grid-template-rows: repeat(9, 50px)
...然后根據需要跨行跨越網格區域。
aluckdog
TA貢獻1847條經驗 獲得超7個贊
將盒子 1 和盒子 3 放在一個 div 中，將其垂直對齊，并將所有其他 3 個盒子放在一個容器中，放在 1 個容器中，這樣你就可以輕松做到這一點
- 2 回答
- 0 關注
- 180 瀏覽
添加回答
舉報
0/150
提交
取消