CSS Grid Generator

El CSS Grid Generator crea layouts con CSS Grid de forma visual y te devuelve el código listo para pegar. Definís filas y columnas, ajustás los espacios y copiás las propiedades grid-template sin escribirlas a mano ni recordar la sintaxis de fr, repeat() o gap.

fr, repeat() y gap: lo que genera el código

En CSS Grid, repeat(3, 1fr) crea tres columnas iguales y gap define el espacio entre celdas sin necesidad de márgenes manuales.

CSS Grid usa la unidad fr (fracción del espacio libre) para repartir el ancho entre columnas sin cálculos de porcentajes. repeat(3, 1fr) crea tres columnas iguales; gap define el espacio entre celdas sin márgenes manuales.

El generador traduce lo que armás visualmente a display: grid con grid-template-columns, grid-template-rows y gap, que es exactamente el código que pegás en tu hoja de estilos. Para layouts responsive, el patrón repeat(auto-fit, minmax(200px, 1fr)) acomoda las columnas solo según el ancho de pantalla.

• ▸fr: reparte el espacio libre sin porcentajes
• ▸repeat(): columnas repetidas sin escribirlas una a una
• ▸gap: separación entre celdas
• ▸auto-fit + minmax: grid responsive sin media queries

Cómo funciona — paso a paso

1. 1
   Definí filas y columnas

   Elegí cuántas filas y columnas querés y su tamaño en fr, px o auto.
2. 2
   Ajustá el gap

   Configurá el espacio entre celdas y, si hace falta, uní celdas para zonas más grandes.
3. 3
   Copiá el CSS

   Copiá el código grid-template generado y pegalo directamente en tu hoja de estilos.