Genera diseños de cuadrícula CSS con plantillas de columnas/filas y controles de espacio
Un generador de CSS grid te deja construir un layout de rejilla de forma visual — definiendo columnas y filas y los huecos entre ellas — y luego copiar el CSS que lo produce. CSS Grid es el sistema de layout más potente de CSS, diseñado para layouts bidimensionales donde controlas filas y columnas a la vez, pero su sintaxis para plantillas, fracciones y huecos es densa y difícil de imaginar solo con el código. Ajustar columnas y ver la rejilla reorganizarse es mucho más rápido que editar cadenas de plantilla a ciegas.
La pieza que desbloquea Grid es la unidad fr y las propiedades grid-template: fr divide el espacio disponible en fracciones flexibles, así que una plantilla "1fr 2fr" da dos columnas donde la segunda es el doble de ancha, y el layout fluye de forma responsive sin anchos fijos en píxeles. Combinado con gap para un espaciado consistente, esto maneja layouts de página, galerías de imágenes, paneles y rejillas de tarjetas que son incómodos con técnicas más antiguas. Esta herramienta genera CSS basado en estándares en tu navegador, listo para pegar, así que puedes maquetar una rejilla a ojo en vez de a prueba y error.
fr significa "fracción" y divide el espacio disponible en porciones flexibles. Una plantilla "1fr 1fr 1fr" crea tres columnas iguales, mientras que "1fr 2fr" hace la segunda columna el doble de ancha que la primera. A diferencia de los píxeles fijos, las columnas fr se flexan para llenar el contenedor de forma responsive.
Grid está hecho para layouts bidimensionales — filas y columnas a la vez — como la estructura de una página entera o una rejilla de tarjetas. Flexbox destaca en una dirección, una sola fila o columna. Muchos diseños usan Grid para el layout general y Flexbox dentro de los componentes individuales.
gap fija un espaciado consistente entre filas y columnas de la rejilla sin añadir márgenes a los propios elementos. Se aplica solo entre celdas, no alrededor del borde exterior, lo que hace mucho más fácil un espaciado uniforme y predecible que gestionar márgenes en cada elemento.
Sí. Más allá de definir la rejilla, se puede indicar a elementos individuales que abarquen varias columnas o filas, así que una tarjeta destacada puede estirarse por el layout mientras otras se quedan en celdas individuales. El generador se centra en la definición de la rejilla; el abarcado se fija por elemento con grid-column y grid-row.
Generador de sombra de caja CSS · Generador de radio de borde CSS · Generador de Flexbox · Generador de sombra de texto CSS · Generador de animaciones CSS · Generador de filtros CSS