La diferencia entre las unidades de porcentaje y fr en CSS Grid Layout

Solución:

fr

los fr La unidad funciona solo con el espacio libre en el contenedor.

Entonces en tu código:

grid-template-columns: repeat(12, 1fr);

… el espacio libre en el contenedor se distribuye equitativamente entre 12 columnas.

Dado que las columnas solo tratan con espacio libre, grid-column-gap no es un factor. Se restó del ancho del contenedor antes de la fr se determinó la longitud (referencia de especificación).

Así es como el navegador realiza el cálculo:

(free space - gutters) / 12  = 1fr

---

%

Cuando estás usando porcentajes …

grid-template-columns: repeat(12, calc(100% / 12));

… el contenedor se divide en 12 columnas, cada una con un ancho de 8.33333%. Esta es una longitud real, a diferencia de la fr unidad, que solo se ocupa del espacio libre.

Tanto las longitudes de las columnas como los huecos de la cuadrícula se tienen en cuenta en el ancho.

Así es como el navegador realiza el cálculo:

8.33333% * 12 = 100%
         +
11 * 10px     = 110px

Hay un claro desbordamiento.

(Nota: grid-*-gap las propiedades se aplican solo entre elementos de la cuadrícula, nunca entre elementos y el contenedor. Es por eso que el número de huecos en la red es 11, no 13.)

Esto funciona:

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));

Que se descompone en esto:

• 12 columnas

• el ancho de cada columna se determina tomando el ancho completo del contenedor (100%) y dividiéndolo por 12

  100% / 12 = 8.3333% (individual column width)
  

• luego reste los espacios entre columnas (hay 11)

   10px * 11 = 110px (total width of column gaps)
  
  110px / 12 = 9.1667px (amount to be deducted from each column)
  

.grid {
  display: grid;
  grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
}

.l-1 { grid-column-start: span 1; }
.l-2 { grid-column-start: span 2; }
.l-3 { grid-column-start: span 3; }
.l-4 { grid-column-start: span 4; }
.l-5 { grid-column-start: span 5; }
.l-6 { grid-column-start: span 6; }
.l-7 { grid-column-start: span 7; }
.l-8 { grid-column-start: span 8; }
.l-9 { grid-column-start: span 9; }
.l-10 { grid-column-start: span 10; }
.l-11 { grid-column-start: span 11; }
.l-12 { grid-column-start: span 12; }
[class*=l-] { border: 1px solid red; }

<div class="grid">
  <div class="l-6">Column 1</div>
  <div class="l-6">Column 2</div>
  <div class="l-3">Column 3</div>
  <div class="l-4">Column 4</div>
  <div class="l-3">Column 5</div>
  <div class="l-2">Column 6</div>
  <div class="l-1">Column 7</div>
  <div class="l-10">Column 8</div>
  <div class="l-1">Column 9</div>
  <div class="l-5">Column 10</div>
  <div class="l-5">Column 11</div>
  <div class="l-2">Column 12</div>
</div>

De acuerdo con esta parte de la especificación, la unidad fr no es una longitud, por lo que se “calcula” DESPUÉS de determinar la cantidad de espacio libre disponible dentro del motor de diseño.

La variable que ha creado en su primer ejemplo ES parte de un cálculo (100% del ancho y dividiendo por 12) por lo que ejecuta el cálculo ANTES de pasar al motor de diseño.

Cuando digo motor de diseño, lo estoy usando como una metáfora y no quiero confundir a la gente con el proceso de renderizado que realiza el navegador. Solo estoy tratando de decir que en su primer ejemplo está presentando una serie de números que se conectan al navegador para comenzar el proceso de renderizado y en su segundo ejemplo está presentando más de un algoritmo / función que el navegador puede usar para hacer su diseño.

---

---

Utiliza Nuestro Buscador