我無(wú)法grid-template-rows與單位一起工作fr。我可以讓行高隨其他單位（如像素）變化，但不能隨fr單位變化。我不明白為什么這不起作用，因?yàn)檫@些fr單位正在使用grid-template-columns..grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px; text-align: center;}<div class="grid-container"> <div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> <div class="item"> 4 </div> <div class="item"> 5 </div> <div class="item"> 6 </div> <div class="item"> 7 </div> <div class="item"> 8 </div> <div class="item"> 9 </div> <div class="item"> 10 </div> <div class="item"> 11 </div> <div class="item"> 12 </div> <div class="item"> 13 </div> <div class="item"> 14 </div> <div class="item"> 15 </div> <div class="item"> 16 </div> <div class="item"> 17 </div> <div class="item"> 18 </div> <div class="item"> 19 </div> <div class="item"> 20 </div> <div class="item"> 21 </div> <div class="item"> 22 </div> <div class="item"> 23 </div> <div class="item"> 24 </div> <div class="item"> 25 </div> <div class="item"> 26 </div> <div class="item"> 27 </div> <div class="item"> 28 </div> <div class="item"> 29 </div> <div class="item"> 30 </div></div>這是一個(gè)用于說(shuō)明結(jié)果的模板。我不確定為什么底部圖表中缺少一些塊。
1 回答
牧羊人nacy
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個(gè)贊
您的容器沒(méi)有額外的高度。因此，該單元沒(méi)有可用空間fr來(lái)分配。
設(shè)置容器的高度（例如height: 100vh）。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 5px;
text-align: center;
height: 100vh; /* new */
}
body {
margin: 0;
}
<div class="grid-container">
<div class="item"> 1 </div>
<div class="item"> 2 </div>
<div class="item"> 3 </div>
<div class="item"> 4 </div>
<div class="item"> 5 </div>
<div class="item"> 6 </div>
<div class="item"> 7 </div>
<div class="item"> 8 </div>
<div class="item"> 9 </div>
<div class="item"> 10 </div>
<div class="item"> 11 </div>
<div class="item"> 12 </div>
<div class="item"> 13 </div>
<div class="item"> 14 </div>
<div class="item"> 15 </div>
<div class="item"> 16 </div>
<div class="item"> 17 </div>
<div class="item"> 18 </div>
<div class="item"> 19 </div>
<div class="item"> 20 </div>
<div class="item"> 21 </div>
<div class="item"> 22 </div>
<div class="item"> 23 </div>
<div class="item"> 24 </div>
<div class="item"> 25 </div>
<div class="item"> 26 </div>
<div class="item"> 27 </div>
<div class="item"> 28 </div>
<div class="item"> 29 </div>
<div class="item"> 30 </div>
</div>
我不明白為什么這不起作用，因?yàn)檫@些
fr單位正在使用grid-template-columns.
默認(rèn)情況下，塊元素占用其父元素的整個(gè)寬度。所以你不需要定義width: 100%.
身高則不然。大多數(shù)元素默認(rèn)設(shè)置為其內(nèi)容的高度 ( height: auto)。因此，如果您希望容器比內(nèi)容高，則需要定義高度。
這就是為什么這些fr單位正在與 合作，grid-template-columns但沒(méi)有grid-template-rows。
- 1 回答
- 0 關(guān)注
- 200 瀏覽
添加回答
舉報(bào)
0/150
提交
取消