En este artículo, te enseñaré cómo usar CSS Grid para crear una cuadrícula de imágenes súper genial que varía el número de columnas con el ancho de la pantalla.
Y la parte más hermosa: la capacidad de respuesta se agregará con una sola línea de CSS.
Esto significa que no tenemos que saturar el HTML con nombres de clases desagradables (es decir col-sm-4, col-md-8) o crear consultas de medios para cada tamaño de pantalla.
Si desea aprender a crear sitios web receptivos a nivel profesional, puede considerar consultar el bootcamp de diseño web receptivo de Scrimba, ya que lleva a los estudiantes desde principiantes hasta avanzados a través de 15 horas de tutoriales interactivos.
¡Ahora saltemos a eso!
La puesta en marcha
Para este artículo, continuaremos con la cuadrícula que usamos en mi primer artículo de CSS Grid. Luego agregaremos las imágenes al final del artículo. Así es como se ve nuestra cuadrícula inicial:
Aquí está el HTML:
1 2 3 4 5 6 Y el CSS:
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } Nota: el ejemplo también tiene un poco de estilo básico, que no entraré aquí, ya que no tiene nada que ver con CSS Grid.
Si este código te confunde, te recomiendo que leas mi artículo Learn CSS Grid in 5 minutes, donde explico los conceptos básicos del módulo de diseño.
Comencemos por hacer que las columnas respondan.
Capacidad de respuesta básica con la unidad de fracción
CSS Grid trae consigo un valor completamente nuevo llamado unidad de fracción. La unidad de fracción se escribe como fr, y le permite dividir el recipiente en tantas fracciones como desee.
Cambiemos cada una de las columnas para que tengan una unidad de fracción de ancho.
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px; } Lo que sucede aquí es que la cuadrícula divide todo el ancho en tres fracciones y cada una de las columnas ocupa una unidad cada una. Aquí está el resultado:
Si cambiamos el grid-template-columnsvalor a 1fr 2fr 1fr, la segunda columna ahora tendrá el doble de ancho que las otras dos columnas. El ancho total ahora es de cuatro unidades fraccionarias, y la segunda ocupa dos de ellas, mientras que las otras toman una cada una. Así es como se ve:
En otras palabras, el valor de la unidad de fracción hace que sea muy fácil cambiar el ancho de las columnas.
Capacidad de respuesta avanzada
Sin embargo, el ejemplo anterior no nos da la capacidad de respuesta que queremos, ya que esta cuadrícula siempre tendrá tres columnas de ancho. Queremos que nuestra cuadrícula varíe el número de columnas con el ancho del contenedor. Para lograrlo, tendrás que aprender tres conceptos nuevos.
repetir()
Empezaremos con la repeat()función. Esta es una forma más eficaz de especificar sus columnas y filas. Tomemos nuestra cuadrícula original y cambiemos a usar repeat ():
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px); } En otras palabras, repeat(3, 100px)es idéntico a 100px 100px 100px. El primer parámetro especificó cuántas columnas o filas desea, y el segundo especifica su ancho, por lo que esto nos dará exactamente el mismo diseño con el que comenzamos:
autoajuste
Luego está el autoajuste. Dejemos de tener una cantidad fija de columnas y reemplacemos 3 por auto-fit.
.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); } Esto da como resultado el siguiente comportamiento:
La cuadrícula ahora varía el número de columnas con el ancho del contenedor.
Simplemente intenta colocar tantas columnas de 100px de ancho en el contenedor como sea posible.
Sin embargo, si codificamos todas las columnas para que sean exactamente 100px, nunca obtendremos la flexibilidad que queremos, ya que rara vez suman el ancho completo. Como puede ver en el gif anterior, la cuadrícula a menudo deja espacios en blanco en el lado derecho.
mínimo máximo()
El ingrediente final que necesitamos para solucionar este problema se llama minmax(). Simplemente reemplazaremos 100px con minmax(100px, 1fr). Aquí está el CSS final.
.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); } Observe que toda la capacidad de respuesta ocurre en una sola línea de CSS.
Esto da como resultado el siguiente comportamiento:
Y como puede ver, funciona perfectamente. La minmax()función define un rango de tamaño mayor o igual al mínimo y menor o igual al máximo.
So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.
Adding the images
Now the final step is to add the images. This has nothing to do with CSS Grid, but let’s still look at the code.
We’ll start off by adding an image tag inside of each of the grid items.
To make the image fit into the item, we’ll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it’s needed.
.container > div > img { width: 100%; height: 100%; object-fit: cover; } Which ends up like the following:
And that’s it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.
Browser support
Before we end, I also need to mention browser support. At the time of writing this article, 93% of global website traffic supports CSS Grid, and it’s climbing. It's becoming more and more clear that Grid is turning into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox a few years ago.
If you want to learn Flexbox, Grid and responsive design once and for all, you should check out the responsive web design bootcamp on Scrimba. It'll take your beginner to advanced through interactive tutorials that are easy to follow.
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba, an interactive learning platform for learning to code.