Generador de CSS Grid

Columnas, filas, espacios y tarjetas adaptables con vista previa

Error

Revise los ajustes de la cuadrícula.

Vista Previa

La cuadrícula se actualiza al cambiar columnas, tamaños y espacios.

Tarjetas Adaptables

El modo auto-fit pasa las tarjetas a nuevas filas en pantallas pequeñas sin media queries.

Elementos que Abarcan

Haga que el primer elemento abarque varias columnas o filas, un patrón habitual de tarjeta destacada.

Privado

Todo se ejecuta en su navegador; nada de lo que pegue se sube.

CSS Grid en Breve

grid-template-columns: repeat(3, 1fr) crea tres columnas iguales, donde fr es una fracción del espacio libre. Las pistas también pueden ser fijas (200px), según el contenido (auto) o flexibles con límites (minmax(150px, 1fr)). gap define el espacio entre pistas sin añadir márgenes a los elementos, y grid-column: span 2 permite que un elemento ocupe dos columnas.

El patrón adaptable repeat(auto-fit, minmax(min(200px, 100%), 1fr)) coloca tantas columnas como quepan, cada una de al menos 200px, y las estira para llenar la fila; el min() interior evita que una tarjeta se desborde en pantallas de menos de 200px. Use Grid para diseños bidimensionales y Flexbox para filas de contenido en una dimensión.

Puntos Clave

Unidades fr: Reparten el espacio libre proporcionalmente.
gap, no margin: Los espacios nunca aparecen en los bordes exteriores.
auto-fit para tarjetas: Adaptable sin una sola media query.

Herramientas relacionadas

Generador de clamp() CSS

Introduzca un tamaño mínimo y máximo y el rango de ventana para obtener un valor clamp() con rem y vw, una tabla de tamaños para puntos de corte habituales.

Generador de Degradados CSS

Construya un degradado CSS lineal o radial con una vista previa en vivo, luego copie el CSS generado.

Generador de Sombras CSS

Construya una sombra CSS box-shadow con desplazamiento, desenfoque, propagación, color y opacidad ajustables, con vista previa en vivo.

Aprender más

Guía rápida

Referencia rápida de CSS

Unidades CSS, atajos, sombras, degradados, tipografía fluida con clamp(), cuadrícula, curvas de aceleración, especificidad y contraste.

Generador de CSS Grid - Cree Cuadrículas Visualmente y Copie el CSS