Tengo 36 divs con identificadores id="square-1", "square-2", etc., enmarcados en un contenedor de cuadrícula de 6x6. Quiero que sean todos cuadrados y del tamaño de cada cuadrado de la cuadrícula. Quiero hacer una función para agregar css a cada uno de ellos para determinar su posición en la cuadrícula. En mi opinión, puedo hacer algo para recorrerlos con un bucle for y aplicar "gridColumn = "a/b"", donde a y b son relativos a la i en el bucle for, para no tener que especificar eso 36 veces en el documento css. ¿Es esto posible? ¿Tiene sentido? Muy principiante...
<div class="div-container"> <div id= "square-1"></div> <div id= "square-2"></div> <div id= "square-3"></div> <div id= "square-4"></div> <div id= "square-5"></div> <div id= "square-6"></div> <div id= "square-7"></div> etc... </div>Hacer un seguimiento de los elementos mediante una propiedad CSS es frágil. Si está utilizando JavaScript, deje que haga el trabajo pesado. Por ejemplo, en lugar de codificar 36 <div> con identificadores, haga un <div> en cada iteración de un bucle. En el siguiente ejemplo, el contenedor es un <main> y cada subcuadro es una <section> . A cada <section> se le asigna una propiedad CSS de order y un número correspondiente y una identificación: "sq"+ un número correspondiente. La propiedad order se aplica al orden en que aparece un elemento flexible dentro de un contenedor flexible.
const box = document.querySelector('main'); for (let i = 0; i < 36; i++) { const sec = document.createElement('section'); sec.style.order = i; sec.id = `sq${i}`; box.append(sec); } html { font: 300 5vmin/1 Consolas } main { display: flex; flex-flow: row wrap; width: 12rem; height: 12rem; border: 1px solid red } section { width: 2rem; height: 2rem; outline: 1px dashed blue } <main></main>Si usa CSS Grid , use un bucle para crear el marcado (he usado cadenas de plantillas insertadas en una matriz) y agregue eso (matriz unida) como el innerHTML de un contenedor. Puede agregar el índice de matriz como el atributo de identificación de datos, junto con un atributo de fila/columna si desea identificar la posición del cuadro en la cuadrícula.
En este ejemplo, he agregado una función que cambia el color de fondo del cuadro (una clase ,active ) cuando se hace clic en él.
function makeGrid(n) { const boxes = []; let row = 0; let column = 1; for (let i = 1; i < n * n; i++) { column++; if (i % 6 === 1) { row++; column = 1; } const div = ` <div class="box" data-id="${i}" data-row="${row}" data-column="${column}" >${i} </div>`; boxes.push(div); } return boxes.join(''); } const main = document.querySelector('main'); main.innerHTML = makeGrid(6); main.addEventListener('click', handleClick); function handleClick(e) { if (e.target.matches('.box')) { e.target.classList.add('active'); } } main { display: grid; grid-template-columns: repeat(6, 30px); gap: 0.5em; } .box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 30px; height: 30px; border: 1px solid #676767; } .box:not(.active):hover { background-color: lightblue; cursor: pointer; } .active { background-color: salmon }; <main></main>Documentación adicional
Parece que puedes usar una cuadrícula css aquí.
Para usar esto, simplemente necesita agregar css al elemento principal (aquí su div-container ) y completar con elementos secundarios que se organizarán en la cuadrícula.
Si es un principiante en HTML y css, puede generar cuadrículas utilizando sitios web como cssgrid-generator .
Pequeño ejemplo aquí usando una cuadrícula de 2 * 2
.parent { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; width: 210px } .child { background: red; width: 100px; height: 100px; } <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>Nota: también puede generar los elementos secundarios usando un bucle for en javascript que hará que su código sea más ligero