我無法grid-template-rows與單位一起工作fr。我可以讓行高隨其他單位（如像素）變化，但不能隨fr單位變化。我不明白為什么這不起作用，因為這些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>這是一個用于說明結果的模板。我不確定為什么底部圖表中缺少一些塊。
1 回答
牧羊人nacy
TA貢獻1862條經驗 獲得超7個贊
您的容器沒有額外的高度。因此，該單元沒有可用空間fr來分配。
設置容器的高度（例如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>
我不明白為什么這不起作用，因為這些
fr單位正在使用grid-template-columns.
默認情況下，塊元素占用其父元素的整個寬度。所以你不需要定義width: 100%.
身高則不然。大多數元素默認設置為其內容的高度 ( height: auto)。因此，如果您希望容器比內容高，則需要定義高度。
這就是為什么這些fr單位正在與 合作，grid-template-columns但沒有grid-template-rows。
- 1 回答
- 0 關注
- 186 瀏覽
添加回答
舉報
0/150
提交
取消