這個 CSS 網格只創建 7 行，您可以使用瀏覽器的“檢查工具”看到。為什么？
.grid {
display: grid;
grid-gap: 1em;
height: 100%;
}
.grid8x8 {
grid-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(8, 1fr);
}
.element {
background-color: yellow;
}<div class="grid grid8x8">
<div class="element" style="grid-row: 2 / 4; grid-column: 3 / 6;">TEST</div>
</div>uj5u.com熱心網友回復：
你實際上有 8 行。您在檢查器中看到的是單元格之間的間隙，因此對于 8 行有 7 個間隙（紅線是間隙）：
如果減小間隙大小，您會注意到行的顯示方式：
注意 8 行：
您的問題是網格單元格溢位了所有其他單元格，因為沒有足夠的空間，因為您的空間grid-gap太高了。
uj5u.com熱心網友回復：
嘗試這個：
.grid { display: grid; grid-gap: 1em; height: 70vh; }
.grid8x8 { grid-template-rows: repeat(8, 1fr); grid-template-columns: repeat(8, 1fr); }
.element { background-color: yellow; }<div class="grid grid8x8">
<div class="element" style="grid-row: 2 / 4; grid-column: 3 / 6;">TEST</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/506637.html