I need to incorporate a grid of 16x16 or 64x64 into my layout without it overflowing. I'm considering using flexbox, but unsure of the implementation process. My goal is to have the grid resize based on the container size rather than exceeding its boundaries.
<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="./style.css">
<script src="./index.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="flex-container">
<div id="container"></div>
</div>
</body>
</html>:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
background-color: white;
width: 50%;
height: 100%;
}
.flex-container {
background-color: coral;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 70%;
}
#container {
display: grid;
grid-gap: 1em;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
padding: 1em;
text-align: center;
}
.grid-item:hover {
background-color: beige;
}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(16, 16);