Estoy tratando de encajar mi cuadrícula de 16x16 o 64x64 (el tamaño no importa) dentro de mi cuadrícula. Estaba pensando en usar flexbox, pero no estoy seguro de cómo implementarlo. Me gustaría que mi cuadrícula se encogiera y expandiera de acuerdo con el tamaño del contenedor, en lugar de salir del contenedor.
```<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);```Pruebe este tamaño de cambio según su necesidad
grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); grid-auto-rows: minmax(100px, auto);