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 segun el contenido. La funcion 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. Esta unidad hace que crear disenos proporcionales sea intuitivo y evita calculos complejos de porcentaje.
Espaciado y Separacion
La propiedad gap controla el espaciado entre 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 Diseno Comunes
El diseno Holy Grail usa un encabezado que abarca todas las columnas, una seccion media de tres columnas y un pie de pagina de ancho completo. Los disenos de Dashboard presentan una barra lateral fija con una cuadricula de contenido flexible. Los disenos de Galeria usan unidades fr iguales para celdas uniformes.
