En el ejemplo del capítulo anterior utilizamos píxels como unidades de las celdas de la cuadrícula, sin embargo, también es posible utilizar otras unidades (o incluso combinarlas) como porcentajes, la palabra clave auto (que obtiene el tamaño restante) o la unidad especial de Grid CSS fr (fraction), que simboliza una fracción de espacio restante en el grid.
Veamos un código de ejemplo en acción.
Ejm
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 1fr;
}
Este nuevo ejemplo, creamos una cuadrícula de 2×2, donde el tamaño de ancho de la cuadrícula se divide en dos columnas (mismo tamaño de ancho para cada una), y el tamaño de alto de la cuadrícula se divide en dos filas, donde la primera ocupará el doble (2fr) que la segunda (1fr). Así, podemos tener un mejor control del espacio restante de la cuadrícula, y como utilizarlo.
Se pueden combinar varias unidades diferentes, pudiendo utilizar píxeles (px) y fracciones restantes (fr), porcentajes (%) y fracciones restantes (fr)…