Ir al contenido
Allin
Registrarse · Entrar

Generador de CSS Grid

Construye un layout CSS Grid visualmente — columnas, filas, espacios y alineación — con vista previa en vivo y CSS para copiar.

Herramientas relacionadas

Todas las herramientas: Colores y CSS →
Compresor de CSSMinifica CSS eliminando comentarios y espacios para reducir el tamaño de tu hoja de estilos.Laboratorio de CSS FlexboxExperimenta con flex-direction, wrap, justify-content, align-items y gap — vista previa en vivo y CSS para copiar.Embellecedor de CSSReformatea CSS minificado o desordenado en reglas limpias y bien sangradas — o vuelve a minificarlo.Generador de sombra CSS (box-shadow)Ajusta una sombra CSS con vista previa en vivo y copia el código generado — desplazamiento, desenfoque, extensión, color, inset.Comprobador de contraste de colorRelación de contraste WCAG entre texto y fondo, con aprobado/fallo AA/AAA y una vista previa.Inversor de colorInvierte un color (255 − RGB) o toma su complementario, en HEX/RGB/HSL/CMYK con el contraste.Generador de esquemas de colorDeriva esquemas complementario, análogo, triádico, tetrádico, dividido y monocromático de un color base.Generador de degradados CSSCrea un degradado CSS lineal o radial a partir de dos colores y un ángulo, con salida CSS y Tailwind.

Abre Generador de CSS Grid y obtienes una respuesta al momento, sin crear ninguna cuenta. La encontrarás en Colores y CSS, con Compresor de CSS y Laboratorio de CSS Flexbox para los casos vecinos.

Cómo usarlo

  1. Abre la herramienta — sin registro ni instalación.
  2. Introduce tus datos o ajusta las opciones disponibles.
  3. Obtén tu resultado al instante y cópialo o descárgalo.

Preguntas frecuentes

¿Qué es Generador de CSS Grid?

Construye un layout CSS Grid visualmente — columnas, filas, espacios y alineación — con vista previa en vivo y CSS para copiar.

¿En qué casos se usa realmente?

Llevar un color de una herramienta de diseño a una hoja de estilos, construir una paleta alrededor de un color de marca y comprobar que el texto será legible sobre él.

¿Cuál es el error más frecuente?

Juzgar el contraste a ojo. Dos colores que parecen distintos en un monitor luminoso pueden suspender de lleno la ratio de accesibilidad, y esa ratio es lo que medirá una auditoría.

¿En qué se diferencia Generador de CSS Grid de Compresor de CSS?

Están próximos pero responden a preguntas distintas: Compresor de CSS es el que conviene abrir cuando se trata de minifica CSS eliminando comentarios y espacios para reducir el tamaño de tu hoja de estilos. Elige el que encaje con tu punto de partida — ambos son gratis.

¿Hay una herramienta para el siguiente paso?

Laboratorio de CSS Flexbox es el más cercano después de este: Experimenta con flex-direction, wrap, justify-content, align-items y gap — vista previa en vivo y CSS para copiar.

¿Qué más conviene tener abierto al lado?

Embellecedor de CSS y Generador de sombra CSS (box-shadow): aparecen en la misma tarea lo bastante a menudo como para merecer otra pestaña.

¿De dónde salen los datos?

Las conversiones entre HEX, RGB y HSL son exactas. El contraste sigue la fórmula de luminancia relativa de WCAG 2; el CMYK depende del dispositivo, así que un valor en pantalla es una aproximación de lo que se imprimirá.

Para saber más

Todas las guías →
ExplicaciónDegradados, bandeado y por qué el centro se ve turbioInterpolar en sRGB promedia números codificados en gamma: el punto medio de rojo a verde es #808000 cuando la respuesta a media luz es #bcbc00 — un 57,2 % menos de luz. El bandeado es otro problema aritmético: 8 bits dan 256 escalones, y un degradado oscuro puede tener sólo 28. Aquí están ambos, calculados.ExplicaciónLos esquemas de color son geometría sobre una rueda — y la rueda está malComplementario, tríada, análogo y complementario dividido no son más que rotaciones: suma 180°, 120°, 30° o 150° a un tono. La aritmética es trivial. El problema es que el círculo de tonos HSL no es perceptualmente uniforme — el amarillo y el azul con la misma luminosidad HSL difieren 12,85 veces en luminancia — así que una paleta generada hay que comprobarla luego en contraste.GuíaQué puede quitar un minificador y qué no debe tocarLa minificación tiene que preservar el significado, y lo interesante son los espacios que llevan significado: el combinador descendiente, los espacios dentro de calc(), el hueco entre dos elementos en línea. Medido aquí sobre archivos reales, incluido lo que brotli te iba a ahorrar de todas formas.ExplicaciónRelación de contraste: cómo la calcula realmente la WCAGLa relación WCAG es (L1 + 0,05) ÷ (L2 + 0,05), y L es la luminancia relativa, no el brillo. El verde aporta el 71,52 % y el azul el 7,22 %, por eso el azul puro sobre blanco aprueba con 8,59:1 mientras el gris medio suspende con 3,95:1. Aquí está el cálculo completo, ejecutado de principio a fin.TutorialHEX vs RGB: cómo leer y convertir coloresHEX y RGB son dos notaciones para los mismos colores. Aquí tienes cómo leer cada una, convertir entre ellas y añadir transparencia.GuíaEmbellecer o minificar: para qué sirve cada uno y qué le hace al pesoCuatro hojas de estilo reales pasadas por el minificador, medidas en crudo y tras gzip. Quitar todos los espacios ahorró 48, 103, 104 y 147 bytes comprimidos; quitar los comentarios, 57, 1 358, 2 420 y 1 042. Y las cinco entradas que este minificador rompe.