CSS Grid Generator - generador de grillas CSS con arrastrar y soltar

• Una herramienta que ayuda a crear más fácilmente diseños de grillas CSS personalizados
  • Permite definir cómodamente el tamaño de columnas, filas y espacios usando el mouse
• Cómo usarlo
  • Define columnas, filas y espacios según lo que necesites
  • Haz clic en el rectángulo con el símbolo + para agregar un nuevo elemento a la grilla
  • Usa el controlador en la esquina inferior derecha para ajustar el tamaño del DIV
  • Reubica el DIV arrastrándolo y soltándolo en la posición que quieras
  • Por último, copia el código HTML y CSS generado y pégalo en tu proyecto
• Después de crear Tailwind Grid Generator y recibir comentarios positivos, desarrollaron con base en eso una herramienta para plain CSS

[GN⁺]

Comentarios de Hacker News

• Después de agregar algunas cajas y moverlas para que se superpongan, aparece un problema en el que se salen de los límites de la cuadrícula
• Creó un Tailwind Grid Generator y recibió comentarios positivos, y a partir de eso desarrolló una herramienta para CSS puro
• La reorganización dinámica es un problema más difícil que la configuración de la cuadrícula
  • Consultó MDN para encontrar cómo hacer que la cuadrícula reduzca o aumente columnas
  • Una utilidad simple es útil para simplificar tareas repetitivas
  • Sería útil guardar el estado de configuración de la cuadrícula en la URL
• El generador es útil como herramienta de aprendizaje, y una vez que se entienden la sintaxis y las funciones, se puede usar con más flexibilidad
  • Chrome DevTools también es útil para modificar la cuadrícula y ver los cambios al instante
  • Escribió una publicación sobre la cuadrícula
• Como programador de la vieja escuela, está acostumbrado a crear cuadrículas con tablas, pero el layout en CSS le resulta difícil
  • Este tipo de herramientas ayuda muchísimo
• Hace unos años encontró un generador de sitios similar, pero no tenía función de arrastrar y soltar
  • Aprendió los conceptos básicos de CSS Grid como grid-template-columns, gap, etc.
  • Espera que siga con el buen trabajo
• Cuando Grid apareció por primera vez, pensó que cambiaría radicalmente el layout web basándose en template areas
  • No logró crear un framework interno y terminó usando flex
  • Luego apareció Tailwind y cubrió todo lo necesario para escribir rápidamente frontends responsivos
  • Tiene curiosidad por saber si existe algún buen framework o ejemplo que use template areas
  • La próxima vez que trabaje con Grid usará esta herramienta
• Encontró dos bugs
  • Al redimensionar la ventana del navegador, el ancho no responde
  • Como las cajas son más bajas que el contenedor, la nueva fila queda ubicada más arriba dentro de la cuadrícula
• No es desarrollador web, pero cree que puede haber casos en los que se necesiten más de 12 columnas
  • Si se ingresa un número más grande, las columnas se interpretan de forma extraña
• La UX es muy buena
  • No crea layouts de página con frecuencia, así que no ha aprendido a fondo la sintaxis de Grid, pero va a guardar esta herramienta en marcadores