我试图让我的网格动态适应容器的预定大小，也就是说，即使网格中的单元格数量发生变化，它也会继续保持相同的大小。
const container = document.getElementById("container");
function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "grid-item";
};
};
makeRows(10, 10);
:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
width: 400px;
height: 400px;
display: grid;
grid-gap: 0;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
padding: 1em;
border: 1px solid #ddd;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>SketchPad</title>
</head>
<body>
<div class="flex-container">
<div class="title">
<h1>SketchPad</h1>
</div>
<div class="mode">Mode: Coloring</div>
<div class="content">
<div id="container"></div>
<div class="buttons">
<button class="blackButton" onclick="changeColor('black')">
Black
</button>
<button class="erasorButton" onclick="changeColor('white')">
Erasor
</button>
<button class="grayButton" onclick="changeColor('gray')">Gray</button>
<button class="randomButton" onclick="changeColor('random')">
Random
</button>
</div>
<div>
<input type="text" placeholder="Size of Board" value="16" onchange="changeSize(this.value)" />
<button>Set Size</button>
</div>
<div class="error">Input must be between 2 and 100</div>
</div>
</div>
</body>
<script src="App.js"></script>
</html>
我正在尝试制作一个画板，但是当我更改网格中的单元格数量时，它会大于我的容器的大小，其想法是单元格的大小会自动适应
您正在尝试设置列数。相反，设置列的 width 并让 CSS 计算出网格中可以容纳多少个该宽度的列。
const makeChildren = (e, n) => {
let a = []
for (let i = 0; i < Math.pow(n, 2); i++) {
a.push('<div></div>')
}
e.innerHTML = a.join('')
e.style.gridTemplateColumns = `repeat(auto-fit, calc(var(--size) / ${n}))`
}
makeChildren(document.getElementById('c1'), 2)
makeChildren(document.getElementById('c2'), 5)
makeChildren(document.getElementById('c3'), 10):root {
--size: 200px;
}
body {
margin: 1em;
}
.container {
width: var(--size);
display: grid;
margin-bottom: 1em;
}
.container>* {
border: 1px solid black;
aspect-ratio: 1/1;
}<div id="c1" class="container"></div>
<div id="c2" class="container"></div>
<div id="c3" class="container"></div>