當我不知道行數時，是否可以使網格項目從第一行到最后一行？可以說我有以下HTML，其中的框數未知。如何使.box第一個網格線到最后一個網格線的第三個跨度？.container { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; grid-template-rows: auto [last-line];}.box { background-color: blue; padding: 20px; border: 1px solid red;}.box:nth-child(3) { background-color: yellow; grid-column: last-col / span 1; grid-row: 1 / last-line;}<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box">3</div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div></div>
3 回答
POPMUISE
TA貢獻1765條經驗 獲得超5個贊
您可以將grid-row-start添加到該框css，并將其設置為跨越一個非常大的數字。
.container {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
}
.box {
background-color: blue;
padding: 20px;
border: 1px solid red;
}
.box:nth-child(3) {
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
grid-row-start: span 9000;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
慕少森
TA貢獻2019條經驗 獲得超9個贊
當我不知道行數時，是否可以使網格項目從第一行到最后一行？
當前規范（級別1）似乎缺少針對此問題的自然網格解決方案。因此答案將是“否”，嚴格來說是使用Grid屬性。
但是，如該答案所指出的，絕對定位可能是可行的。
盡管CSS網格無法使網格區域跨越隱式網格中的所有列/行，但它可以在顯式網格中完成工作。
使用負整數。
這是CSS Grid規范中的兩個有趣的部分：
7.1。顯式網格
網格放置屬性中的數字索引從顯式網格的邊緣開始計數。正索引從起始側開始計數，而負索引從結束側開始計數。
和這里...
8.3?；谛械恼故疚恢茫篻rid-row-start，grid-column-start， grid-row-end，和grid-column-end性質
如果給定一個負整數，則從顯式網格的末端開始倒數。
換句話說，當處理顯式網格時，即使用以下屬性定義的網格：
grid-template-rows
grid-template-columns
grid-template-areas
...您可以通過設置以下規則使網格區域跨越所有列：
grid-column: 3 / -1;
這告訴網格區域從第三列線到最后一列線。
相反的是：
grid-column: 1 / -3;
同樣，此方法僅在顯式網格中有效。
- 3 回答
- 0 關注
- 814 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消