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 grid css auto 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 ( grid repeat autofill ),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, grid template auto fill, 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 autofill
// grid repeat auto-fill
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 display grid 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.
Ahora que sabes cómo funcionan 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!
