我正在嘗試創建一個由 16 個正方形（div）組成的 4 x 4 網格。我已經制作了帶有網格顯示的容器 div。這 16 個方塊是成行的，但是當我嘗試制作 4 列時，它在開發工具的樣式選項卡中有一個洗掉線。
這是我的 CSS 中的內容：
html,body{
height: 100%;
margin: none;
}
#heading{
height: 250px;
}
#wrapper{
width: 600px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
#container{
border: solid 1px;
display: grid;
grid-template-columns: 25%, 25%, 25%, 25%;
height: 600px;
width: auto;
}
.squares{
border: solid 1px rgba(0, 0, 0, 0.3);
}
他們 16 個子 div 是用 JS 創建的。這會對為什么網格沒有按預期作業有影響嗎？
let x = 0;
do{
const square = document.createElement("div");
square.className = "squares";
square.setAttribute("id","block");
document.getElementById("container").appendChild(square);
x ;
}
while(x < 16);
uj5u.com熱心網友回復：
不需要值,之間的grid-template-columns值。auto如果它們都相同并指定，您也可以將其更改為而不是自己進行計算25%。現在看看
let x = 0;
do{
const square = document.createElement("div");
square.className = "squares";
square.setAttribute("id","block");
document.getElementById("container").appendChild(square);
x ;
}
while(x < 16);html,body{
height: 100%;
margin: none;
}
#heading{
height: 250px;
}
#wrapper{
width: 600px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
#container{
border: solid 1px;
display: grid;
grid-template-columns: auto auto auto auto;
height: 600px;
width: auto;
}
.squares{
border: solid 1px rgba(0, 0, 0, 0.3);
}<div id="container">
</div>uj5u.com熱心網友回復：
如果你這樣做，逗號會干擾grid-template-columns:
grid-template-columns: 25% 25% 25% 25%;
應該解決提到的問題
uj5u.com熱心網友回復：
您還可以使用repeat：
grid-template-columns: repeat(4, 25%);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/492528.html
標籤：javascript css CSS网格