Tengo un formulario con algunos elementos de entrada que quiero organizar en una cuadrícula según las preferencias de los usuarios. Mirando a mi alrededor, me he encontrado con grillas CSS .
Estoy pensando en crear una cuadrícula CSS con filas r y columnas c , y luego usar javascript para asignar elementos de entrada a las celdas de la cuadrícula de acuerdo con un diseño definido por el usuario (por ejemplo, un objeto que tiene la identificación de los elementos de entrada como claves y el (columna-span) pares como valores).
No sé si esta es la mejor (o incluso una solución viable), y suena como un montón de código repetitivo para cambiar las propiedades CSS de los elementos de entrada. Entonces mis preguntas son: ¿es este el enfoque correcto para este problema? ¿Existen otros enfoques (mejores y más fáciles), no necesariamente basados en cuadrículas CSS?
Estoy usando javascript simple y Vue.js, si es importante (perdón por mi redacción imprecisa, soy un desarrollador autodidacta aficionado).
Puede usar grid-template-areas para asignar elementos a una posición en la cuadrícula independientemente de su orden en el DOM.
form { display: grid; gap: 0.5rem; grid-template-areas: "wx" "yz"; } #a { grid-area: z; } #b { grid-area: w; } #c { grid-area: y; } #d { grid-area: x; } <form> <input id="a" type="text" placeholder="A"> <input id="b" type="text" placeholder="B"> <input id="c" type="text" placeholder="C"> <input id="d" type="text" placeholder="D"> </form>puede establecer un atributo para la entrada o cualquier etiqueta html.
Si el pedido se basa en las preferencias del usuario, supongo que tendrá un objeto json que indica la posición de los campos en el formulario, por lo que puede establecer un atributo para la etiqueta html
<span data-column="0" data-row="0" /> <input type='text' data-column="1" data-row="0" /> or <input type='text' data-order="1:0" /> <input type='text' data-order="0:0" /> luego, al generar el formulario con una instrucción de bucle, puede getAttribute/setAttribute con document.getElementById().setAttribute('attrName','attrValue')