Generador CSS Grid
Crea un diseño bidimensional con pistas explícitas e implícitas y elementos individuales. El navegador calcula la distribución y el editor muestra las reglas declaradas.
Crea una cuadrícula
- Define el tamaño del ejemplo, las pistas, el flujo, la dirección, los espacios y la alineación.
- Edita el texto y la ubicación, cambia el orden del código o usa áreas con nombre. Corrige los campos incompletos o contradictorios.
- Examina la vista previa y el código; copia CSS o HTML o descarga el mismo documento completo de la vista previa.
Cómo funcionan las reglas
Las pistas explícitas proceden de la plantilla; la ubicación automática o fuera de ella puede crear pistas implícitas según patrones propios.
fr reparte el espacio restante según Grid, no un porcentaje del exterior. 1fr tiene un mínimo automático; minmax(0px, 1fr) lo cambia. El mínimo del elemento es independiente.
Las líneas, order y dense pueden cambiar el orden visual sin cambiar la lectura o el foco del HTML. Los controles de movimiento cambian el orden real del código.
Las columnas siguen el eje inline y las filas el eje block; en escritura vertical cambian sus direcciones físicas. Ajustar solo escala la vista y no crea puntos de ruptura.
Ejemplos
Con un ancho border-box de 640px, bordes de 1px y relleno de 16px por lado, quedan 606px de contenido. Tras dos espacios de 12px y una pista de 120px quedan 462px; en condiciones simples, 1fr y 2fr reciben 154px y 308px. El resultado real puede variar.
En tres columnas explícitas, -1 indica la última línea explícita, aunque aparezcan columnas implícitas. El número negativo se conserva en CSS.
En dos columnas, header puede ocupar la primera fila, nav y main la segunda y footer la tercera. Cada área es rectangular; las celdas vacías se representan con un punto.
Límites del editor
Cada eje admite 1–12 pistas explícitas y 1–4 tamaños implícitos; hay 1–12 elementos. Admite minmax, líneas, spans y rectángulos con nombre, no CSS arbitrario.
No incluye repeat, auto-fit, auto-fill, subgrid, masonry, cuadrículas anidadas ni generador de puntos de ruptura. Las pistas flexibles no garantizan un sitio adaptable.
Los porcentajes más los espacios pueden desbordarse. El contenido, las fuentes, los mínimos automáticos, los bordes y las barras de desplazamiento afectan al resultado.
El modo de líneas permite solapamientos, pero rechaza extremos definidos iguales o invertidos. Las áreas con nombre deben ser únicas, interiores y no solaparse.
La vista previa y la descarga comparten un documento con margen de página cero. En otro sitio, los estilos y las métricas del navegador pueden afectar al fragmento.
Ejemplo local
El texto se escapa y el código se genera localmente, sin enviarlo ni guardarlo en la URL o el historial. La vista usa un sandbox vacío y una política restrictiva de recursos; esto no certifica otros servicios ni cambios posteriores.
Preguntas sobre CSS Grid
Fuentes
Especificaciones que describen el comportamiento del ejemplo.
- W3Cw3.orgCSS Grid LayoutCSS Grid
- W3Cw3.orgCSS Box AlignmentCSS Box Alignment
- W3Cw3.orgCSS Writing ModesCSS Writing Modes
- W3Cw3.orgCSS SizingDefine tamaños intrínsecos y preferidos.
- W3Cw3.orgCSS GapsDefine espacios entre filas y columnas.
- WHATWGhtml.spec.whatwg.orgHTML iframeDefine el comportamiento de iframe, srcdoc y sandbox.
- W3Cw3.orgContent Security PolicyContent Security Policy
Descripciones de las fuentes revisadas el 09/11/2026.
El navegador calcula la distribución; las especificaciones no certifican esta implementación.
Herramientas relacionadas
SVG a PNG
Convierte un archivo SVG local o código pegado en PNG, con dimensiones definidas, transparencia y fuentes incluidas.
Abrir herramienta — SVG a PNGGenerador de filtros CSS
Ordena y repite efectos CSS, compara una muestra y copia la declaración exacta.
Abrir herramienta — Generador de filtros CSSCalculadora de tamaño de fuente fluido
Define el tamaño de fuente para dos anchos de ventana gráfica. Copia el CSS relativo a la raíz y consulta el modelo calculado con los mismos coeficientes exportados.
Abrir herramienta — Calculadora de tamaño de fuente fluidoGenerador de botones CSS
Diseña los estados de un botón nativo, comprueba el foco y copia HTML y CSS.
Abrir herramienta — Generador de botones CSSGenerador CSS de border-radius
Edita ocho radios, previsualiza una caja y copia el CSS en píxeles o porcentajes.
Abrir herramienta — Generador CSS de border-radiusGenerador CSS Flexbox
Cree un ejemplo de Flexbox con controles de elementos y contenedores, ejes de diseño explícitos, CSS y HTML coincidentes y una descarga local completa del ejemplo.
Abrir herramienta — Generador CSS FlexboxGenerador CSS de sombras de texto
Crea sombras de texto ordenadas, previsualiza texto plano y copia el CSS exacto.
Abrir herramienta — Generador CSS de sombras de textoGenerador de transformación CSS
Redacte transformaciones CSS 2D repetibles, edite px o porcentaje de traducción y origen, inspeccione un cuadro de referencia y copie las declaraciones actuales exactas.
Abrir herramienta — Generador de transformación CSSGenerador de sombras CSS
Crea capas box-shadow ordenadas, previsualiza el resultado y copia el código CSS.
Abrir herramienta — Generador de sombras CSSMarca de agua en imágenes
Añade texto o un logotipo a las imágenes, revisa los resultados y descarga archivos individuales o un ZIP.
Abrir herramienta — Marca de agua en imágenesGenerador de degradados CSS
Crea degradados lineales o radiales con colores, opacidad y puntos ajustables.
Abrir herramienta — Generador de degradados CSSConversor de colores
Convierte valores sRGB HEX, RGB y HSL compatibles con alfa y precisión explícita.
Abrir herramienta — Conversor de coloresImagen a texto (OCR)
Reconoce texto impreso en PNG o JPEG locales, elige el idioma y revisa o corrige el resultado antes de copiarlo o descargarlo.
Abrir herramienta — Imagen a texto (OCR)Lector de QR desde imagen
Lee un código QR de un PNG o JPEG local y examina el texto o los bytes sin abrir enlaces.
Abrir herramienta — Lector de QR desde imagenComprobador de contraste de colores
Compara los colores del primer plano y del fondo, ajusta la opacidad y comprueba los umbrales numéricos WCAG para texto y detalles esenciales de la interfaz.
Abrir herramienta — Comprobador de contraste de coloresCalculadora de tamaño de impresión y resolución
Calcula el tamaño de impresión, los píxeles necesarios y los PPI efectivos con márgenes o recorte.
Abrir herramienta — Calculadora de tamaño de impresión y resoluciónCalculadora de relación de aspecto
Calcula la relación entre anchura y altura o nuevas dimensiones en píxeles fijando un solo lado.
Abrir herramienta — Calculadora de relación de aspectoCompresor de imágenes
Intenta ajustar un JPEG, PNG o WebP a un tamaño de archivo objetivo, con resultados medidos y reducción opcional de dimensiones.
Abrir herramienta — Compresor de imágenesHEIC a JPG
Convierte fotos HEIC compatibles en copias JPG a tamaño completo, con calidad y fondo ajustables y descargas verificadas individuales o en ZIP.
Abrir herramienta — HEIC a JPGConversor de imágenes
Convierte imágenes PNG, JPEG y WebP localmente, ajusta transparencia, fondo y calidad, y descarga los resultados.
Abrir herramienta — Conversor de imágenesCreador de collages de fotos
Organiza fotos locales en una cuadrícula y descarga un PNG o JPEG.
Abrir herramienta — Creador de collages de fotosGirar y reflejar imágenes
Gira o refleja un lote local de imágenes estáticas PNG, JPEG y WebP; revisa y descarga los resultados procesados.
Abrir herramienta — Girar y reflejar imágenesRecortar imagen
Recorta un JPEG, PNG o WebP local con precisión en píxeles y descarga el resultado en PNG o JPEG.
Abrir herramienta — Recortar imagenCambiar tamaño de imagen
Cambia el tamaño de JPG, PNG o WebP en píxeles o porcentaje, revisa y descarga el resultado.
Abrir herramienta — Cambiar tamaño de imagen