Quiero hacer una cuadrícula simple con bucle for para que el código a continuación cree una cuadrícula de 5 (fila) * 4 (columna).
for(let i=0;i<20;i++){ let div = document.createElement('div') document.body.appendChild(div) div.textContent = i } div{ width:200px; height:200px; text-align:center; border:2px solid red display:grid; grid-column-gap: 50px; grid-row-gap: 50px; }Revisé algo de documentación antes de hacer esta pregunta, pero todavía no sé cómo crear una cuadrícula usando for loop para que el elemento siga el formato que quiero.
Quiero que la cuadrícula se muestre cada 4 en una fila y que la izquierda se muestre en la siguiente fila.
La salida debería verse como:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20¡Alguien, por favor, ayúdame! Lo siento, soy malo en Javascript.
Crédito a @A Haworth
body { display:grid; grid-column-gap: 50px; grid-row-gap: 50px; } div{ width:200px; height:200px; text-align:center; border:2px solid red }Es el cuerpo (el padre de los divs) el que desea que se muestre como una cuadrícula.
Así que establezca el estilo de cuadrícula en el cuerpo, no en los elementos individuales.
También puede decirle cuántos elementos desea en una fila (es decir, cuántas columnas) usando grid-template-columns. En este caso, como ha fijado el ancho de cada elemento, solo desea que use los anchos de los elementos. Si quisiera que llenara el espacio disponible, el ancho del padre, entonces usaría 1fr en lugar de automático.
for (let i = 0; i < 20; i++) { let div = document.createElement('div') document.body.appendChild(div) div.textContent = i } body { display: grid; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: repeat(3, auto); } div { width: 200px; height: 200px; text-align: center; border: 2px solid red; } <body> </body> for (let i = 1; i <= 5 * 4; i++) { let div = document.createElement('div') document.body.appendChild(div) div.textContent = i } div { width: 25%; height: 50px; text-align: center; float: left; }