Diseño de cuadrícula CSS: la unidad Fr

Introducción

Con CSS Grid Layout, obtenemos una nueva unidad flexible: la unidad Fr. Fr es una unidad fraccionaria y1eses para 1 parte del espacio disponible. Los siguientes son algunos ejemplos deunidad de fren el trabajo. Los elementos de la cuadrícula en estos ejemplos se colocan en la cuadrícula con áreas de cuadrícula.

.container {  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  grid-template-rows: 100px 200px 100px;  grid-template-areas:        "head head2 . side"        "main main2 . side"        "footer footer footer footer";}

Las 4 columnas ocupan cada una la misma cantidad de espacio.

CabezaCabeza 2PrincipalPrincipal 2LadoPie de página

Ejemplos que utilizan fr

A continuación se muestra el mismo ejemplo anterior con diferentes valores de fr . Observe el cambio en el diseño:

.container {  /* ... */  grid-template-columns: 1fr 1fr 40px 20%;  grid-template-rows: 100px 200px 100px;  /* ... */}

CabezaCabeza 2PrincipalPrincipal 2LadoPie de página

En el siguiente último ejemplo, el elemento de la barra lateral cubre 2fr, por lo que tendrá el mismo ancho que los elementos que abarcan la 1.ª y la 2.ª columna:

.container {  /* ... */  grid-template-columns: 1fr 1fr 40px 2fr;  grid-template-rows: 100px 200px 100px;  /* ... */}

CabezaCabeza 2PrincipalPrincipal 2LadoPie de página

Unidades mixtas

Como viste en los ejemplos anteriores, puedes mezclardevalores con valores fijos y porcentuales.deLos valores se dividirán entre el espacio que quede después de lo que ocupen los otros valores.

Por ejemplo, si tiene una cuadrícula con 4 columnas como en el siguiente fragmento, la primera columna tendrá 300 px, la segunda 80 px (10 % de 800 px), la tercera y la cuarta columnas tendrán 210 px (cada una ocupando la mitad del espacio restante):

main {  width: 800px;  display: grid;  grid-template-columns: 300px 10% 1fr 1fr;  /* 300px 80px 210px 210px */  grid-template-rows: auto;}