Generador de Grid CSS
Define tus columnas y filas, arrastra sobre las celdas para colocar elementos y copia el CSS de la cuadrícula con su HTML en un clic.
Tu cuadrícula se construye en tu navegador. Nada de lo que ajustes aquí se sube a BroBroGo.
Preguntas frecuentes
¿Cómo coloco elementos en la cuadrícula?
Mantén pulsado y arrastra sobre las celdas para marcar un rectángulo: al soltar, se convierte en un hijo que abarca esas columnas y filas. Cada elemento que dibujas recibe su propia regla grid-column y grid-row en el CSS y un div correspondiente en el HTML. Los elementos pueden solaparse, y el último dibujado queda encima; usa la × del elemento para quitarlo.
¿Pueden las columnas y filas tener tamaños distintos?
Sí. Cada pista tiene su propia casilla de tamaño, donde puedes escribir cualquier valor de grid: 1fr, 200px, auto, min-content o minmax(120px, 1fr). Las pistas con el mismo tamaño se agrupan en repeat() para que el código quede corto. El espacio entre columnas y entre filas se ajusta por separado y se une en un solo gap cuando coinciden.
¿Qué hago con el código generado?
Copia el CSS y el HTML juntos. El HTML te da el contenedor con un div por elemento, y el CSS define la cuadrícula y coloca cada uno. Pega ambos en tu proyecto y obtendrás el mismo diseño que dibujaste aquí.