Diseño Web Responsive con 3 líneas de CSS y sin usar Media Queries

¡Aprende a crear un diseño responsive con CSS y sin usar Media Queries!

Y todo gracias a la potencia de CSS Grid.

La clave está en la propiedad `grid-template-columns`, que se utiliza para especificar las columnas dentro de la cuadrícula.

Luego con la función `repeat()`, le indicamos cómo se van a repetir las columnas.

El primer argumento es el número de veces que se debe repetir el patrón.

Con `auto-fit` le decimos que se deben ajustar automáticamente el número de columnas para que encajen en el contenedor de la rejilla.

Esto significa que se creará el número máximo de columnas posibles dentro del contenedor, según el tamaño de los elementos contenidos en ellas.

De segundo parámetro es el patrón que se debe repetir.

La función minmax() se utiliza para establecer un rango de tamaño para las columnas.
Le decimos que el tamaño mínimo es de 150px y el máximo es de 1fr.

Finalmente usamos `gap` para separar los elementos.

¡En mi ejemplo he usado imágenes pero podrías usar cualquier otro elemento dentro!

Si te ha gustado el tutorial, deja tu ❤️ y compártelo con tus amigos.