Auto-fill y auto-fit en CSS Grid

Autor: | Última modificación: 1 de julio de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

En este post, te enseñamos cómo usar las funciones auto-fill y auto-fit en CSS Grid para modificar las características de tu cuadrícula. Recuerda que CSS Grid es un sistema de posicionamiento avanzado que nos permite ubicar los elementos HTML de nuestra página web tomando como base una cuadrícula que nosotros mismos diseñamos.

¿Qué son las funciones auto-fill y auto-fit en CSS Grid?

Las funciones auto-fill y auto-fit en CSS Grid son palabras clave que podemos insertar en aquellas propiedades que determinan el tamaño de una columna o una fila. Al igual que las funciones repeat y minmax, estas palabras clave se pueden usar con otras keywords para definir varias características del comportamiento de los tracks simultáneamente. A continuación, te enseñamos qué hace cada una:

<auto-fill>

Esta palabra clave nos ayuda a decirle al navegador que inserte el número de columnas o filas que sea necesario para rellenar el espacio. Podríamos escribir la siguiente línea de código:

grid-template-columns: repeat (auto-fill, minmax (150px, 1fr)

Lo que quiere decir la función auto-fill en este caso es que el navegador puede ubicar el número de columnas que quepan en el ancho, mientras que su ancho mínimo sea de 150px. Entonces, cuando la pantalla cambie de tamaño, el navegador modificará automáticamente el número de columnas que haya según el ancho disponible. El máximo 1fr hace que las columnas siempre tengan el mismo ancho una respecto a la otra.

<auto-fit>

La diferencia entre las funciones auto-fill y auto-fit en CSS Grid es que la primera pondrá el número de columnas que quepan, sin importar el número de elementos a ubicar. Esto quiere decir que, cuando usamos auto-fill, aun si tenemos pocos elementos, este seguirá poniendo columnas aunque estén vacías si el espacio es mayor a la suma de sus anchos.

La función auto-fit, en cambio, ajusta las columnas para ocupar todo el espacio disponible, sin dejar espacio restante. Ten presente que esta función respeta los anchos mínimos, al igual que auto-fill.

Para ver la diferencia de manera más clara, te invitamos a ver este ejemplo sobre el comportamiento auto-fill y auto-fit en CSS Grid.

¿Qué sigue?

Ahora que sabes cómo funcionan las palabras clave auto-fill y auto-fit en CSS Grid, ¿a qué estás esperando para empezar tu propia cuadrícula? ¡No lo dudes más! Desde KeepCoding te invitamos a seguir aprendiendo y programando en nuestro Desarrollo Web Full Stack Bootcamp, con el que, en pocos meses, serás un experto en desarrollo web. ¡Anímate a inscribirte!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!