Generador de cuadrícula CSS

Una declaración de áreas de plantilla de cuadrícula es una de las piezas de CSS más legibles que existen, pero solo una vez que existe: llegar allí a mano significa contar cadenas entre comillas y hacer coincidir longitudes de filas, y una celda que no coincide rompe silenciosamente todo el diseño. Este generador convierte eso en manipulación directa: establezca el recuento de columnas y filas, escriba un nombre en cualquier celda de la cuadrícula en vivo y los nombres coincidentes se fusionarán automáticamente en una región con nombre.

Debajo del capó, cada celda que dejas en blanco se convierte en un punto en la cadena de áreas de plantilla de cuadrícula generada, y cada celda que nombras se convierte en parte del rectángulo de ese nombre. CSS solo permite que una región con nombre ocupe un bloque rectangular limpio, por lo que la herramienta lo verifica a medida que escribe y le indica exactamente cuándo un nombre aún no forma un rectángulo válido; en lugar de producir CSS silenciosamente, el navegador lo rechazará.

El espacio entre columnas y el espacio entre filas tienen un valor predeterminado de 8 píxeles y se combinan en una sola línea de espacio cuando coinciden, y la cuadrícula de vista previa en vivo siempre refleja las pistas de columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula, incluidas las columnas de píxeles fijos de un ajuste preestablecido como los rieles laterales de 200 píxeles del santo grial. La salida copiable cubre ambos lados: un bloque CSS listo para su hoja de estilo y un esqueleto HTML coincidente con un div de área de cuadrícula por región nombrada.

Grid y flexbox resuelven diferentes problemas de diseño, y el generador css-flexbox de este sitio es el mejor punto de partida para diseños unidimensionales: una sola fila o columna de elementos flexibles, como una barra de navegación o una pila de tarjetas. Utilice este generador de cuadrícula cuando necesite control bidimensional, filas y columnas explícitas o regiones con nombre como encabezado/nav/principal/pie de página; Las dos herramientas a menudo terminan en la misma página, la cuadrícula para el caparazón de la página y el flexbox dentro de sus piezas. Como todas las herramientas de este sitio, se ejecuta completamente en su navegador: sin carga, sin cuenta.