0
173
Vistas¿Se pueden envolver los elementos de la cuadrícula?
¿Cómo puedo hacer que los elementos de la cuadrícula se envuelvan dentro de su contenedor? porque cada vez que ingrese 64 como un nuevo tamaño de cuadrícula, los elementos de la cuadrícula se desbordarían fuera de su contenedor. Quiero que los elementos de la cuadrícula se ajusten al tamaño del contenedor de la cuadrícula.
Básicamente, quiero que el contenedor de cuadrícula mantenga su tamaño sin importar cuántos elementos de cuadrícula nuevos se agreguen.
const grid = document.querySelector('#grid-container'); function makeGrid(rows, cols) { for (let i = 0; i < (rows * cols); i++) { grid.style.setProperty('--grid-rows', rows); grid.style.setProperty('--grid-cols', cols); let tile = document.createElement('div'); grid.appendChild(tile).className = 'grid-item'; //fill color tile.addEventListener('mouseover', () => { tile.style.backgroundColor = 'black'; }) } } makeGrid(16, 16); function resizeGrid() { const resizeBtn = document.querySelector('#resize-btn'); resizeBtn.addEventListener('click', () => { //remove default grid const gridItem = document.querySelectorAll('.grid-item'); gridItem.forEach((item) => { grid.removeChild(item); }) //create new grid let input = prompt('number of tiles per side'); let rows = input; let cols = rows; makeGrid(rows, cols); }) } resizeGrid(); :root { --grid-rows: 1; --grid-cols: 1; } .container { display: flex; flex-direction: column; align-items: center; } #resize-btn { padding: 5px 10px; margin-top: 5px; margin-bottom: 5px; background-color: #333; color: #f1f1f1; font-size: 16px; border: none; border-radius: 5px; } #grid-container { display: grid; grid-template-rows: repeat(var(--grid-rows), 1fr); grid-template-columns: repeat(var(--grid-cols), 1fr); min-width: 500px; min-height: 500px; border: 10px solid coral; background-color: rgb(247, 208, 194); border-radius: 10px; } .grid-item { border: 1px solid black; padding: 1em; } <div class="container"> <button id="resize-btn">Resize</button> <div id="grid-container"></div> </div>2 Respuestas
Responde la pregunta0
Su diseño agrega columnas y filas:
#grid-container { display: grid; grid-template-rows: repeat(var(--grid-rows), 1fr); grid-template-columns: repeat(var(--grid-cols), 1fr); }Las columnas y las filas no se ajustan. Se agregan al conjunto existente de columnas o filas.
Por lo tanto, los elementos de la cuadrícula en este diseño no se ajustarán. Ocupan las celdas creadas por las nuevas pistas.
Si desea un diseño en el que se auto-fit los elementos, utilice las funciones auto-fill cuadrícula, que limitan la creación de columnas o filas al tamaño del contenedor. Trabajando juntos, estas funciones y límites permiten que los elementos de la cuadrícula fluyan a través de las pistas.
Otra opción es flexbox, que no genera pistas de columnas o filas, solo líneas flexibles.
Estas publicaciones pueden proporcionar más orientación:
0
Cada vez que crea un div, hay áreas de margen, borde, relleno y contenido a considerar. En este caso, si establece el relleno en 1em y desea mostrar muchos divs, pero no caben dentro de su contenedor, aumentará el tamaño de su contenedor.
Simplemente configure el margen y el relleno en cero, y use el contorno en lugar del borde, que no ocupa espacio adicional, por lo que no hará que su contenedor crezca.
CSS
.grid-item { outline: 1px solid blue; padding: 0; margin: 0; }** Por cierto, si desea colocar cualquier contenido dentro de cada div, asígnele sus propias propiedades de modelo de caja que le gusten y considere que ocupan espacio.
¿Es este el resultado que esperabas?
