I am trying to fit my grid of 16x16 or 64x64 (the size shound't matter) inside of my grid. I was thinking of using flexbox, but im not sure how to go about implementing that. I'd like for my grid to shrink and expand according to the size of the container, rather than being popped outside of the container.
```<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>```
CSS:
```: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;
}```
Javascript:
```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);```
Try this change size according to your need
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
grid-auto-rows: minmax(100px, auto);