Con toda la emoción en torno a CSS Grid, no he visto tanto hablar sobre el nuevo fr Unidad de longitud CSS (aquí está la especificación). Y ahora que la compatibilidad del navegador está mejorando rápidamente para esta función, creo que es el momento de explorar cómo se puede utilizar junto con nuestro nuevo y elegante motor de diseño porque hay una serie de beneficios al utilizarlo; Un código más legible y fácil de mantener son las razones principales para realizar el cambio.
Para comenzar, echemos un vistazo a cómo pensamos normalmente en la construcción de una cuadrícula en CSS. En el siguiente ejemplo, estamos creando una cuadrícula de cuatro columnas donde cada columna tiene el mismo ancho:
<div class="grid">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>.grid {
display: grid;
grid-template-columns: repeat(4, 25%);
grid-column-gap: 10px;
}Consulte los trucos de CSS del lápiz: ejemplo de cuadrícula 1 de Robin Rendle (@robinrendle) en CodePen.
Si nunca has visto eso repeat() función después de la grid-template-columns propiedad, entonces permítame presentarle una de las mejores características de CSS Grid. Es una abreviatura que, esencialmente, nos permite describir de manera más sucinta los valores repetidos. Podríamos haber escrito grid-template-columns: 25% 25% 25% 25%; en su lugar, pero es más limpio usando repeat(), especialmente cuando tiene anchos más detallados (como un minmax() expresión).
La sintaxis es esencialmente esta:
repeat(number of columns/rows, the column width we want);
Sin embargo, en realidad hay un par de problemas con lo que hemos hecho hasta ahora.
Primero, para usar esta función de CSS ordenada, tuvimos que hacer un poquito de matemáticas. Tuvimos que pensar para nosotros mismos cuál es el ancho total de la cuadrícula (100%) dividido por el número de columnas que queremos (4), lo que nos lleva al 25%. En este caso, las matemáticas son bastante fáciles, por lo que no tenemos que preocuparnos por eso, pero en ejemplos más complejos podemos evitar por completo hacer las matemáticas y dejar que el navegador lo descubra por nosotros. Nosotros tenemos calc() disponible para nosotros, por lo que podríamos haber hecho repeat(4, calc(100% / 4), pero incluso eso es un poco extraño, y de todos modos hay otro problema …
El segundo problema es un problema de desbordamiento. Porque hemos establecido cada columna al 25% y un grid-column-gap a 10px, entonces empuja el elemento de la cuadrícula más ancho que el 100%. No es como esperarías que funcionen las cosas con solo mirar el código anterior, pero así es como funcionan los porcentajes. Lo que realmente estamos diciendo con el código anterior es “establece cada columna al 25% del ancho de la ventana gráfica y deja un espacio de 10 píxeles entre ellas”. Es una diferencia sutil, pero causa un gran problema con el diseño.
Sin darnos cuenta, hemos causado un desplazamiento horizontal aquí:
Consulte los trucos de CSS del lápiz: ejemplo de cuadrícula 1 de Robin Rendle (@robinrendle) en CodePen.
Aquí es donde el fr unidad puede ayudarnos.
El fr La unidad (una “fracción”) se puede utilizar al definir cuadrículas como cualquier otra longitud de CSS, como %, px o em. Refactoricemos rápidamente el código anterior para usar este nuevo valor peculiar:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
}Consulte los trucos de CSS del lápiz: ejemplo de cuadrícula 1b de Robin Rendle (@robinrendle) en CodePen.
Eso se verá igual que el ejemplo anterior porque en este caso estamos configurando cada una de nuestras cuatro columnas en una fracción (que resulta ser 1/4 o 25%). ¡Pero! Ya no hay desbordamiento en el eje x porque establecer cada columna en 1fr toma esos 10px en cuenta automáticamente y los resta del ancho total disponible para cada columna.
¿Por qué diablos debería aprender a usar esta nueva y elegante longitud de CSS si puedo ceñirme principalmente a las unidades como porcentaje o píxeles? Bueno, profundicemos en un ejemplo de CSS Grid más complejo para explicar por qué fr es una mejor alternativa. En un nuevo ejemplo, digamos que queremos nuestra navegación a la izquierda seguida de una cuadrícula de doce columnas que debería verse así:
Este es un escenario bastante típico para muchas interfaces de usuario y, por lo tanto, el uso de fr unit evita que hagamos un div de cuadrícula separado o que busquemos a tientas calc. Porque si no usáramos fr en el ejemplo anterior, de alguna manera tendríamos que averiguar lo siguiente:
the width of each column = ((width of viewport - width of nav) / number of columns) * 1%
Eso es posible con seguridad, es terriblemente doloroso de leer, y si cambiamos el ancho de la navegación, tendríamos que hacer ese cálculo tonto de nuevo. En cambio, el fr unit ordena todo eso en una línea de código súper legible:
.grid {
display: grid;
grid-template-columns: 250px repeat(12, 1fr);
grid-column-gap: 10px;
}Consulte los trucos de CSS del lápiz: ejemplo de cuadrícula 2 de Robin Rendle (@robinrendle) en CodePen.
Lo que estamos haciendo aquí es establecer un ancho fijo en píxeles para la primera columna y luego crear doce columnas separadas que se establecen en una “fracción del espacio libre” (literalmente, como lo expresa la especificación). ¡Pero no hay cálculos locos ni nada! Es súper legible y si el ancho de esa navegación izquierda cambia, el ancho de nuestras columnas de la derecha se ajustará automáticamente.
Con solo un poco de trabajo preliminar, hemos logrado que nuestra interfaz sea más fácil de mantener para el futuro y nos hemos asegurado de que nuestro código sea más legible para los próximos desarrolladores que vienen detrás de nosotros.
Información de otras personas
Algo de la diversión y el poder del fr La unidad proviene de mezclarla con otras unidades. Imagine una barra lateral fija y un área de contenido principal que ocupa el resto del espacio: grid-template-columns: 200px 1fr; ¡fácil!
Aquí hay un ejemplo de Alligator.io que muestra unidades mixtas muy bien:
Rachel Andrew tiene un video específicamente sobre fr:
Anna Monus tiene un muy buen artículo sobre fr.
Yay por el fr ¡unidad!