Entendiendo las Pistas de Cuadricula
Las pistas de cuadricula son las filas y columnas que definen la estructura de tu cuadricula. Cada pista puede dimensionarse usando varias unidades: las unidades fr distribuyen el espacio restante proporcionalmente, px establece dimensiones fijas y auto ajusta las pistas según el contenido. La función repeat() simplifica definiciones de pistas repetitivas.
La Unidad fr Explicada
La unidad fr representa una fraccion del espacio disponible en el contenedor de cuadricula. Si defines tres columnas como 1fr 2fr 1fr, la columna central ocupa el doble de espacio que cada columna exterior. Está unidad hace que crear diseños proporcionales sea intuitivo y evita cálculos complejos de porcentaje.
Espaciado y Separacion
La propiedad gap controla el espaciado entré celdas de la cuadricula sin afectar los bordes exteriores. Anteriormente llamada grid-gap, la propiedad abreviada gap funciona tanto en Grid como en Flexbox. Puedes establecer espaciados de fila y columna independientemente usando row-gap y column-gap.
Patrones de Diseñó Comunes
El diseño Holy Grail usa un encabezado que abarca todas las columnas, una sección media de tres columnas y un pie de página de ancho completó. Los diseños de Dashboard presentan una barra lateral fija con una cuadricula de contenido flexible. Los diseños de Galería usan unidades fr iguales para celdas uniformes.
