Generador de CSS Grid

• Vista previa en vivo y CSS instantáneo: el generador actualiza la vista previa y la salida CSS con cada cambio, sin botones que pulsar. Ve exactamente cuántas columnas, filas y celdas crea tu cuadrícula y copia la declaración CSS con un clic.
• Unidades flexibles y diseños predefinidos: elige entre unidades fr, px, % o auto tanto para columnas como para filas. Seis diseños predefinidos ofrecen puntos de partida instantáneos, desde simples cuadrículas de 3 columnas hasta complejos diseños de 12 columnas y configuraciones con barra lateral.
• 100% privado, sin subir archivos: toda la generación de CSS Grid ocurre localmente en tu navegador. Tus decisiones de diseño nunca salen de tu dispositivo ni se envían a ningún servidor: seguro para proyectos de clientes y sistemas de diseño propietarios.
• Gratis y sin límites: genera diseños de cuadrícula ilimitados sin registro, sin suscripción y sin límites de uso. El generador es totalmente gratis para siempre y sin anuncios que bloqueen la interfaz.

• Diseños de página adaptables: los diseñadores web usan el generador para prototipar diseños de página adaptables con estructuras de columnas flexibles. La unidad fr crea cuadrículas fluidas que se adaptan a cualquier tamaño de pantalla, mientras que las unidades px dan un control preciso para barras laterales y cabeceras de ancho fijo.
• React y bibliotecas de componentes: los desarrolladores frontend usan el generador para diseñar componentes basados en cuadrícula para aplicaciones React, Vue y Angular. Copia el CSS exacto e intégralo en estilos de componentes, styled-components o soluciones CSS-in-JS.
• Traspaso de diseño a código: los diseñadores usan el generador para traducir diseños de cuadrícula de Figma, Sketch o Adobe XD en código CSS preciso para los desarrolladores. La vista previa visual coincide con el mockup, eliminando las conjeturas durante el traspaso.
• Diseños de plantillas de correo: los desarrolladores de email usan el generador para diseñar plantillas sin tablas con CSS Grid (compatible con Apple Mail, Outlook.com y Yahoo Mail). Los valores de columnas y espaciado producen estructuras de correo limpias y adaptables.
• Aprendizaje y experimentación con CSS: quienes aprenden frontend usan el generador para entender cómo funcionan juntos grid-template-columns, grid-template-rows y gap. La vista previa visual facilita ver cómo afecta cada control al diseño final.
• Cuadrículas de tarjetas y galerías: los creadores de contenido usan el generador para diseñar diseños basados en tarjetas para archivos de blog, galerías de productos, cuadrículas de portafolios y widgets de panel. La vista previa en vivo muestra el número exacto de celdas y la alineación.

CSS Grid Layout (también conocido como CSS Grid) es un sistema de diseño bidimensional que te permite controlar columnas y filas a la vez. A diferencia de Flexbox, que es unidimensional, Grid puede manejar diseños de página complejos con elementos alineados en ambas direcciones. Las propiedades clave son grid-template-columns, grid-template-rows y gap (antes grid-gap). Nuestro generador de CSS Grid crea estas propiedades visualmente y produce CSS listo para producción para cualquier navegador moderno.

1. Define columnas y filas: usa los controles deslizantes para fijar el número de columnas (1-12) y filas (1-12). Elige una unidad para cada dimensión: fr (fracción del espacio disponible), px (píxeles fijos), % (porcentaje del contenedor) o auto (ajustar al contenido). La vista previa se actualiza al instante.
2. Ajusta los espaciados y el ancho/alto: define los valores de espaciado de columna y fila de forma independiente con los controles deslizantes (0-100px). Si usas unidades fr, px o %, define el tamaño de la pista. La vista previa muestra celdas numeradas para que veas exactamente cuántos elementos puedes colocar.
3. Copia el CSS: haz clic en «Copiar CSS» para copiar la declaración CSS lista para producción a tu portapapeles. La salida incluye display: grid, grid-template-columns, grid-template-rows y gap.

• fr (unidad de fracción): distribuye el espacio disponible proporcionalmente entre columnas y filas. 1fr 2fr crea dos columnas donde la segunda tiene el doble de ancho que la primera. La unidad fr es la opción más común para diseños de cuadrícula adaptables.
• px (píxeles): crea pistas de tamaño fijo que no cambian al redimensionar el contenedor. Usa px para barras laterales de ancho fijo, cuadrículas de iconos y elementos con requisitos de tamaño precisos.
• % (porcentaje): crea pistas dimensionadas como porcentaje del ancho del contenedor. Ten en cuenta que los valores porcentuales se calculan a partir del espacio disponible después de restar los espaciados.
• auto: dimensiona la pista para ajustarse a su contenido. Las columnas auto se expanden al ancho del elemento más ancho y las filas auto a la altura del elemento más alto de esa fila.

CSS Grid es compatible con todos los navegadores modernos (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+) sin prefijos de proveedor. Para obtener los mejores resultados, usa la unidad fr para diseños de columnas adaptables y auto para filas que se adapten a la altura del contenido. La propiedad abreviada gap acepta un valor (espaciados iguales) o dos valores (fila columna), algo que nuestro generador de CSS Grid gestiona automáticamente.