Generador de CSS Grid
CSS Grid Builder
Dispone una cuadrícula de forma visual con áreas con nombre y emite el CSS de grid-template.
Pinta áreas con nombre sobre una cuadrícula pulsando celdas, las comprueba contra la regla del rectángulo de la especificación y emite `grid-template-areas`, o números de línea si lo prefieres. La comprobación importa porque una lista de áreas inválida se descarta en silencio, sin ningún error en ninguna parte.
Cuadrícula
Una celda de tamaño acepta 1fr·240px·auto·minmax(200px, 1fr).
Haz clic en una celda para darle el nombre de área de abajo. Haz clic en una y luego en otra y el rectángulo que queda entre las dos se rellena como una sola área. Si vuelves a hacer clic en una celda con ese mismo nombre, se vacía.
CSS
Vista previa
Hay una sola regla que recordar
Un área con nombre tiene que ser un rectángulo (CSS Grid Level 2 §7.3.1). Haz una forma de L y todo el grid-template-areas se descarta sin ningún error, y por eso esta herramienta te avisa antes de escribir el CSS. Tres o más pistas iguales seguidas se escriben con repeat().
Para un diseño de una sola dimensión, el laboratorio de Flexbox es más simple.
Cómo se usa
Empieza desde una disposición
Cabecera-lateral-principal-pie, una fila de tarjetas, un panel de control, un artículo centrado. O construye la tuya desde una cuadrícula vacía.
Nombra un área y pulsa las celdas
Escribe el nombre y luego pulsa. Pulsa una celda y después otra para rellenar el rectángulo entre ellas; pulsa otra vez una celda del mismo nombre para vaciarla.
Fija los tamaños de las pistas
Las cajas de arriba y de la izquierda aceptan `1fr`, `240px`, `auto` o `minmax(200px, 1fr)`. Tres o más pistas idénticas se escriben con `repeat()`.
Preguntas frecuentes
¿Por qué mi área en forma de L no funciona?
Porque un área con nombre tiene que ser un rectángulo: CSS Grid Level 2 §7.3.1. Si no lo es, la declaración `grid-template-areas` entera es inválida y el navegador la descarta sin ningún error. Esta herramienta te lo dice antes de escribir el CSS, que es el único aviso que vas a recibir.
¿Áreas con nombre o números de línea?
Las áreas se leen mejor y sobreviven a que se inserte una pista. Los números de línea son la única opción cuando un elemento abarca una pista que no existe en todos los puntos de ruptura, o cuando la cuadrícula se genera. El conmutador escribe cualquiera de los dos.
¿Cómo dejo una celda vacía?
No le des nombre. Se escribe como `.` en la plantilla, que es el token de celda nula de la especificación: un punto por celda vacía, y una serie de ellos sigue teniendo que dejar rectangular cada área con nombre.
¿Por qué `fr` no se encoge por debajo del contenido?
Porque `1fr` significa `minmax(auto, 1fr)`, y ese mínimo `auto` es el tamaño del contenido. Usa `minmax(0, 1fr)` cuando quieras una pista que de verdad pueda hacerse más estrecha que lo que contiene: el arreglo clásico para un hijo de grid que se niega a encogerse.
Puede recibir de
Laboratorio de Flexbox
Flexbox Playground
Activa cada propiedad de flex sobre un ejemplo en vivo y muestra el CSS junto con lo que cambió cada una.
Calculadora de tamaños fluidos
Fluid Size Calculator
Calcula la expresión clamp() que hace que un tamaño crezca de forma continua entre dos anchos de pantalla.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Calculadora de tamaños fluidos
Fluid Size Calculator
Calcula la expresión clamp() que hace que un tamaño crezca de forma continua entre dos anchos de pantalla.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Laboratorio de Flexbox
Flexbox Playground
Activa cada propiedad de flex sobre un ejemplo en vivo y muestra el CSS junto con lo que cambió cada una.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.