¿Qué es la unidad fr en CSS Grid y cómo funciona?

La unidad fr (del inglés «fractional unit» o unidad fraccional) es una unidad de longitud específica de CSS Grid Layout, diseñada para crear diseños de cuadrícula flexibles y adaptables de una manera muy intuitiva y potente.

¿Qué es la unidad fr?

Una unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. El «espacio disponible» se refiere al espacio que queda en el contenedor después de que se haya asignado espacio a:

• Las pistas (columnas o filas) que tienen tamaños fijos (definidos en px, em, etc.).
• Las pistas cuyo tamaño se basa en su contenido (auto).
• Los espacios entre pistas (definidos por gap, row-gap, column-gap).

¿Cómo funciona?

Cuando defines el tamaño de las columnas (grid-template-columns) o las filas (grid-template-rows) utilizando unidades fr, el espacio disponible restante se divide entre estas pistas de forma proporcional a sus valores fr.

• Si tienes una sola pista con 1fr (ej. grid-template-columns: 1fr;), esa pista ocupará todo el espacio disponible.
• Si tienes grid-template-columns: 1fr 1fr 1fr;, se crean tres columnas de igual ancho, cada una ocupando un tercio del espacio disponible.
• Si tienes grid-template-columns: 2fr 1fr;, se crean dos columnas. La primera (2fr) será el doble de ancha que la segunda (1fr), y juntas ocuparán todo el espacio disponible. El espacio se divide en 3 partes (2+1), y la primera columna toma 2 de esas partes y la segunda toma 1.
• Puedes combinar fr con otras unidades: grid-template-columns: 100px 1fr 2fr auto;. En este caso, primero se asignan los 100px a la primera columna y se calcula el tamaño de la columna auto según su contenido. El espacio restante se divide entonces entre la segunda (1 parte) y la tercera columna (2 partes).

Ejemplo:

.contenedor-grid {
  display: grid;
  width: 100%; /* O un ancho fijo */
  height: 200px; /* Solo para visualización */
  border: 1px solid #ccc;

  /* Define 3 columnas:
     - La primera tiene un ancho fijo de 150px.
     - El espacio restante se divide entre la segunda y tercera columna.
     - La tercera columna (2fr) será el doble de ancha que la segunda (1fr). */
  grid-template-columns: 150px 1fr 2fr;
  gap: 10px; /* Espacio entre las columnas y filas */
}

/* Estilos para los ítems dentro del grid (para visualización) */
.contenedor-grid > div {
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}Lenguaje del código: PHP (php)

Ventajas de la unidad fr:

• Flexibilidad: Permite que las columnas y filas se ajusten automáticamente al espacio disponible.
• Simplicidad: Facilita la creación de layouts proporcionales sin necesidad de cálculos complejos con porcentajes o la función calc().
• Adaptabilidad: Es ideal para el diseño adaptable, ya que las pistas se redimensionan fluidamente cuando cambia el tamaño del contenedor o del viewport.