¿Qué diferencia existe entre usar 1fr y auto en una rejilla con CSS Grid?

ATENCIÓN: este contenido tiene más de 2 años de antigüedad y, debido a su temática, podría contener información desactualizada o inexacta en la actualidad.

Las unidades fr y auto de las rejillas, a simple vista pueden parecer prácticamente idénticas, pero no lo son. Aunque ambas gestionan automáticamente el espacio tienen algunas diferencias:

• fr significa que se toma una fracción del espacio disponible para las columnas o filas. Todas tienen el mismo tamaño.

• auto significa que se toma el espacio necesario para sus contenidos, aunque se podría reducir en caso de que haya otras columnas interfiriendo y no se quepa, y se podría adaptar en caso de que sobre espacio. Si sobra espacio se reparte por igual entre las filas o columnas, pero a partir del tamaño calculado en función de sus contenidos que ya tengan.

Es decir, cuando tenemos una rejilla y el navegador la va a renderizar, en primer lugar calcula el espacio que necesita darle a cada celda que tenga el tamaño en auto, para que entren dentro sus contenidos. Se queda con el mínimo espacio necesario para ello. Ahora, reparte el resto del espacio dividiéndolo en las fracciones que queden si es que están indicadas, y serán todas iguales ya que lo reparte de la misma manera en cada fracción.

En el siguiente vídeo te explico con un ejemplo práctico esas diferencias: