Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=b42d2a6a-6942-4d80-bcc6-2ad4810fec9b

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

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:

 

José Manuel Alarcón Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón
Archivado en: Desarrollo Web

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.