Generador CSS Grid

fr significa "fraccion del espacio libre disponible". Tras que las columnas de tamano fijo (px, auto) consumen su espacio, el ancho restante se divide en fracciones. grid-template-columns: 1fr 2fr 1fr crea tres columnas donde la columna central recibe el doble de espacio que cada columna lateral. Usar fr es la forma recomendada de crear grids fluidos que se adapten a distintos anchos de pantalla sin necesidad de media queries.

Separa cada tamano de pista con un espacio: grid-template-columns: 200px 1fr 1fr crea una barra lateral fija de 200px y dos columnas fluidas iguales. Puedes mezclar unidades: 1fr auto 1fr hace que la columna central se reduzca al ancho de su contenido. El atajo repeat() simplifica la repeticion: repeat(3, 1fr) es identico a 1fr 1fr 1fr. Esta herramienta genera el atajo correcto en la salida CSS.

gap (antes grid-gap) agrega espacio entre las pistas del grid, no en los bordes exteriores. Esto es casi siempre lo que buscas: espaciado uniforme entre celdas sin relleno extra alrededor del contenedor. margin agrega espacio alrededor de cada elemento del grid, lo que resulta inconsistente en los bordes y aumenta el tamano total del contenedor. Usa gap para los espaciados internos y padding en el contenedor del grid para dar aire alrededor de todo el layout.

Establece grid-column-start y grid-column-end en el elemento. Por ejemplo, grid-column: 1 / 3 hace que el elemento comience en la linea 1 y termine en la linea 3, abarcando 2 columnas. Tambien puedes usar la palabra clave span: grid-column: span 2. La misma logica aplica a las filas con grid-row. Selecciona un elemento del grid en esta herramienta y establece sus valores de inicio y fin para generar el CSS correcto de forma automatica.

Ambos funcionan con repeat() para crear tantas pistas como quepan en el contenedor: repeat(auto-fill, minmax(200px, 1fr)). La diferencia se nota cuando los elementos no llenan todas las columnas disponibles. auto-fill mantiene las columnas vacias en el grid, conservando la estructura de pistas. auto-fit colapsa las columnas vacias a cero y permite que los elementos ocupados se expandan para usar ese espacio. Para la mayoria de grids de tarjetas responsive, auto-fit ofrece el comportamiento mas natural.

grid-template-areas te permite definir el layout con un mapa visual estilo ASCII. Ejemplo: grid-template-areas: "header header" "sidebar content" "footer footer". Luego asigna elementos a las areas con grid-area: header, grid-area: sidebar, etc. Esto hace que los layouts complejos sean legibles y faciles de reestructurar con una media query: simplemente redefine grid-template-areas para el nuevo breakpoint.

No. Todo se ejecuta en tu navegador. Tus configuraciones de grid nunca salen de tu dispositivo.