Guia para CSS Grid Layout Fr Unit

los Módulo de diseño de cuadrícula CSS fue enviado con un nueva unidad de CSS llamó al fr unidad. Tan sencillo como puede ser, fr es el abreviatura de la palabra “fracción”. La nueva unidad hace posible dividir rápidamente la cuadrícula en columnas o filas proporcionales. Como resultado, la creación de Grids totalmente adaptables y flexibles se vuelve casi una brisa.

Como la unidad de fracción se introdujo junto con el módulo Diseño de cuadrícula, puede usarla en cualquier navegador que apoya la cuadrícula CSS. Si también desea admitir navegadores más antiguos, aquí hay un gran CSS rejilla de polietileno que le permite utilizar no sólo el fr unidad, pero otras características de la red, así.

Uso básico

Primero, echemos un vistazo a una cuadrícula básica que utiliza la unidad de fracción. El siguiente diseño divide el espacio en tres columnas de igual ancho y dos filas de igual altura.

El HTML de pertenencia está hecho de seis divs marcado con el .caja clase, dentro de una .envoltura div.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

Para usar el módulo Diseño de cuadrícula, debe agregar el pantalla: rejilla; Propiedad CSS a la envoltura. los rejilla-plantilla-columnas la propiedad usa el fr unidad como valor; la La proporción de las tres columnas es 1: 1: 1..

Para las filas de la cuadrícula (cuadrícula-plantilla-filas propiedad), no usé el fr unidad, ya que sólo tiene sentido si la envoltura tiene una altura fija. De lo contrario, puede tener resultados extraños en algunos dispositivos, sin embargo, incluso entonces, el fr unidad mantiene la relación (y esto es enorme).

los rejilla propiedad agrega una cuadrícula de 10px entre las cajas. Si no quieres ningún hueco simplemente elimina esta propiedad..

 .wrapper display: grid; cuadrícula-plantilla-columnas: 1fr 1fr 1fr; rejilla-plantilla-filas: 200px 200px; rejilla: 10px;  .box color: blanco; text-align: center; tamaño de letra: 30px; relleno: 25px;  

Tenga en cuenta que el CSS anterior no contiene algunos estilos básicos como los colores de fondo. Usted puede Encuentre el código completo en la demostración al final del artículo..

Tasa de cambio

Por supuesto, no solo puedes usar 1: 1: 1 sino cualquier proporción que quieras. Abajo, utilicé 1: 2: 1 fracciones que también dividen el espacio en tres columnas pero la columna del medio será el doble de ancho como los otros dos.

También aumenté el valor de rejilla Para que puedas ver como cambia el diseño. Básicamente, el navegador. deduce la separación de la cuadrícula del ancho de la ventana gráfica (en este ejemplo, las brechas de la cuadrícula suman hasta 80 px), y rebanar el resto segun las fracciones dadas.

 .wrapper display: grid; cuadrícula-plantilla-columnas: 1fr 2fr 1fr; rejilla-plantilla-filas: 200px 200px; rejilla: 40px;  

Combinar fr con otras unidades CSS

Usted puede combinar la fr unidad con cualquier otra unidad CSS también. Por ejemplo, en el siguiente ejemplo, usé el 60% 1fr 2fr relación para mi cuadrícula.

¿Entonces, cómo funciona esto? los El navegador asigna el 60% del ancho de la ventana gráfica. a la primera columna. Luego, divide el resto del espacio en fracciones 1: 2..

Lo mismo podría escribirse también como 60% 13.33333% 26.66667%. Pero, francamente, ¿por qué alguien querría usar ese formato? Una gran ventaja de la unidad de fracción es que mejora la legibilidad del código. Por otra parte, es completamente exacto, como el formato de porcentaje aún se suma solo al 99.9999%.

 .wrapper display: grid; cuadrícula-plantilla-columnas: 60% 1fr 2fr; rejilla-plantilla-filas: 200px 200px; rejilla: 10px;  

Aparte de porcentajes, También puedes usar otras unidades CSS. junto con la unidad de fracción, por ejemplo pt, px, em, y movimiento rápido del ojo.

Añadir espacios en blanco con fr

¿Qué pasa si no quieres que tu diseño sea desordenado y añadir algunos espacios en blanco a su red? La unidad de fracciones también tiene una solución fácil para eso..

Como puedes ver, esta grilla tiene una columna vacía mientras que aún conserva todas las seis cajas. Para este diseño, necesitamos dividir el espacio en cuatro columnas en lugar de tres Por lo tanto, usamos el 1fr 1fr 1fr 1fr valor para el rejilla-plantilla-columnas propiedad.

Añadimos la columna vacía dentro de la cuadrícula-plantillas-áreas propiedad, utilizando el notación de puntos. Básicamente, esta propiedad le permite referencia las áreas de cuadrícula nombradas. Y, usted puede nombrar áreas de cuadrícula con el área de cuadrícula propiedad que necesitas usar por separado para cada area.

 .wrapper display: grid; cuadrícula-plantilla-columnas: 1fr 1fr 1fr 1fr; rejilla-plantilla-filas: 200px 200px; rejilla: 10px; cuadrícula-áreas-plantilla: "caja-1 caja-2. caja-3" "caja-4 caja-5. caja-6";  .box-1 grid-area: box-1;  .box-2 grid-area: box-2;  .box-3 grid-area: box-3;  .box-4 grid-area: box-4;  .box-5 grid-area: box-5;  .box-6 grid-area: box-6;  

Los espacios en blanco. no necesariamente tienen que formar una columna, ellos puede estar en cualquier parte en la cuadrícula.

los repetir() función

También puedes usar el fr unidad junto con la repetir() función para sintaxis mas simple. , esto no es necesario si solo tiene una cuadrícula simple pero puede ser útil cuando desee implementar un diseño complicado, por ejemplo un cuadrícula anidada.

 .wrapper display: grid; cuadrícula-plantilla-columnas: repetir (3, 1fr); / * rejilla-plantilla-columnas: 1fr 1fr 1fr; * / grid-template-rows: 200px; rejilla: 10px;  

los repetir (3, 1fr) sintaxis resultados en el mismo diseño como 1fr 1fr 1fr. El siguiente diseño es el mismo que el primer ejemplo.

Si tu aumentar el multiplicador dentro de repetir() Función tendrás más columnas. Por ejemplo, repetir (6, 1fr) resultados en seis columnas iguales. En este caso, todas nuestras cajas. estará en la misma fila, lo que significa que es suficiente usar un solo valor (200 px) para el cuadrícula-plantilla-filas propiedad.

 .wrapper display: grid; cuadrícula-plantilla-columnas: repetir (6, 1fr); rejilla-plantilla-filas: 200px; rejilla: 10px;  

Puedes usar repetir() mas de una vez. Por ejemplo, el siguiente ejemplo da como resultado una cuadrícula en la que las tres últimas columnas son el doble de ancho como los tres primeros.

 .wrapper display: grid; cuadrícula-plantilla-columnas: repetir (3, 1fr) repetir (3, 2fr); rejilla-plantilla-filas: 200px; rejilla: 10px;  

Tú también puedes combinar repetir() con otras unidades CSS. Por ejemplo, podrías usar 200px repetición (4, 1fr) 200px como un código válido.

Si estas interesado en como crear diseños complejos con el módulo CSS Grid, el repetir() función y la fr La unidad Rachel Andrew tiene una interesante publicación en el blog sobre cómo puedes hacer eso..

Una demo para experimentar.

Finalmente, Aquí está la demo que prometí. Utiliza el mismo código que el primer ejemplo en este artículo. Tenlo en cuenta y mira lo que puedes lograr con el fr unidad.