¡Mira mamá, no hay consultas de los medios! Diseños responsivos que utilizan CSS Grid

CSS Grid no solo ha remodelado la forma en la que pensamos y creamos diseños para la web, sino que también ha contribuido a escribir un código más resistente, reemplazando técnicas “hacky” que hemos usado antes y, en algunos casos, eliminando la necesidad de confiar en Código para certificados y ventanas gráficas específicas. Lo bueno de esta era del desarrollo web es que somos capaces de hacer cada vez más con menos líneas de código.

En este artículo, comenzaremos a sumergirnos en el poder de CSS Grid creando un par de diseños de navegación responsivos comunes. Es más fácil de lo que piensas y, dado que CSS Grid se creó teniendo en cuenta la capacidad de respuesta, necesitarás menos código que escribir consultas de medios por todas partes. ¡Hagámoslo!

Diseño n.º 1: contenido principal y lista de artículos

Comenzaremos este conjunto de ejemplos creando un diseño de sitio web común: una sección de héroe de ancho completo, con una cuadrícula de tarjetas debajo.

Ambos elementos responderán al cambio de tamaño de la ventana y se adaptarán en consecuencia. Aunque esto puede parecer mucho código a primera vista, el comportamiento de respuesta se realiza con solo seis líneas de código CSS Grid y sin escribir una sola @mediaregla . Analizamos el código para ver qué está pasando:

La sección de héroes.

Echemos un vistazo al código del .heroelemento:

section  h1You thirsty?/h1  article    pExplore local breweries with just one click and stirred by starlight across the centuries light years great turbulent clouds circumnavigated paroxysm of global death./p    a href="#breweries"Browse Breweries/a  /article/section

.hero {  /* Photo by mnm.all on Unsplash */  background: url('https://images.unsplash.com/photo-1518176258769-f227c798150e') center;  background-size: cover;  padding: 4rem 2rem;  /* Grid styles */  display: grid;  align-items: center;  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}

Tenemos un montón de estilos de fondo para habilitar el fondo de la cerveza, un poco de relleno para separar el contenido del borde de la pantalla y luego tres líneas de estilos de cuadrícula:

1. La primera línea ( display: grid;) cambia el comportamiento del .heroelemento para que sea un contenedor de cuadrícula. Eso significa que los elementos del interior .heroahora son elementos de la cuadrícula.
2. La segunda línea ( align-items: center;) centrará verticalmente las columnas en nuestra cuadrícula. Pero estas dos líneas no hacen nada por sí solas hasta que configuramos las columnas de nuestra cuadrícula.
3. Y ahí es donde entra en juego la tercera línea. Están sucediendo muchas cosas en esa única propiedad, así que vayamos paso a paso.

La función repetir()

En términos generales, lo que solemos hacer para definir nuestras columnas y filas en un Grid CSS es agregar el valor de cada pista después de definir la propiedad, así:

.element {  /* This will result on four columns, each one of 1fr */  grid-template-columns: 1fr 1fr 1fr 1fr;  /* This will result on two rows, each one of 300px */  grid-template-rows: 300px 300px;}

Eso es bastante aburrido. Podemos usar la repeat()función para hacerlo menos detallada y más fácil de seguir. La función toma dos parámetros:

1. El número de veces que se repetirá el valor.
2. El valor en sí.

Después de refactorizar nuestro código para usar repeat(), deberíamos esperar los mismos resultados de estas líneas de código:

.element {  /* this is the same as grid-template-columns: 1fr 1fr 1fr 1fr; */  grid-template-columns: repeat(4, 1fr);  /* this is the same as grid-template-rows: 300px 300px; */  grid-template-rows: repeat(2, 300px);}  

Mucho más limpio, ¿no?

La función minmax()

Ahora, los ejemplos anteriores definen claramente los tamaños para las pistas ( 1fry 300px). Eso podría funcionar en algunos escenarios, pero para nuestro ejemplo de cerveza, debemos poder calcular automáticamente el tamaño de la pista, en función del ancho de la ventana gráfica, y ajustar automáticamente el número de columnas mostradas. Para poder hacer eso, definiremos un rango de valores usando la minmax()función. ¿Qué estamos definiendo? Probablemente ya lo hayas adivinado: los valores *mínimo* y *máximo* a los que queremos que estas columnas puedan cambiar de tamaño.

En el ejemplo anterior de nuestro héroe de la cerveza, configuramos nuestra minmax()propiedad en 240 px en su tamaño mínimo y 1 fr en su tamaño máximo. frunidades, si nunca has oído hablar de ellas, representan unidades fraccionarias. Nadie puede explicarlos mejor que Jen Simmons en este video y Robin Rendle en esta publicación.

Eso da como resultado que nuestras pistas sean 1fr cuando hay mucho espacio en nuestra ventana gráfica ( también conocidas como resoluciones de escritorio) y 240px cuando no hay suficiente espacio para ambas columnas (como en dispositivos móviles). Es por eso que crecen muy bien cuando ampliamos nuestro navegador, ya que toman el espacio restante y lo dividen equitativamente entre las columnas existentes. ¡Ahora, pasando a la última pieza del rompecabezas!

La palabra clave de ajuste automático

La auto-fitpalabra clave nos permite ajustar nuestras columnas en filas cuando no hay suficiente espacio en nuestra ventana gráfica para ajustarse al valor mínimo de 240 píxeles sin desbordar el contenido. Sara Soueidan escribió un excelente artículo sobre el tamaño automático de columnas usando las palabras clave auto-filly auto-fit, en caso de que desee profundizar un poco más en lo que sucede bajo el capó. Ahora, con el último fragmento de código implementado, podríamos lograr este resultado:

la lista de artículos

Ahora que hemos revisado a fondo el comportamiento de los elementos dentro de nuestro elemento héroe, es probable que las dos primeras líneas de código CSS para la lista de cervecerías a continuación ya te resulten familiares:

.breweries  ul {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));  grid-gap: 1rem;}

¡Así es! Estamos usando exactamente el mismo enfoque: en la primera línea definimos nuestra cuadrícula, en la segunda dimensión nuestras pistas usando la misma línea mágica y en la tercera línea establecemos un espacio para estas columnas. No hay nada nuevo bajo el sol, y lo realmente bueno de esto es que nuestro código es lo suficientemente resistente como para ajustar la cantidad de pistas y sus tamaños, de acuerdo con la cantidad de elementos que tenemos dentro de nuestra lista desordenada:

¡Eso es todo amigos! Un diseño de sitio web totalmente responsivo, que utiliza solo seis líneas de código CSS. No está mal, ¿eh? Asegúrate de verificar el código fuente y jugar con este ejemplo en CodePen.

Diseño n.º 2: galería de imágenes de ancho completo

En el siguiente ejemplo, aprovecharemos el poder de nuestra combinación recién aprendida de repeat()y auto-fitpara minmax()crear esta galería de imágenes responsiva. También dimensionaremos nuestras pistas usando grid-columny grid-rowaprenderemos sobre la práctica combinación de propiedad: valor de grid-auto-flow: dense;que nos permite cambiar el comportamiento predeterminado de los elementos que no caben en nuestras pistas específicas: en lugar de envolverse en nuevas filas o columnas, las haremos encajar en los lugares no utilizados en nuestra cuadrícula. ¡Entremos en la codificación!

La configuración de la red

La cuadrícula se crea usando nuestra display: grid;propiedad familiar, donde las columnas se definen usando repeat()y . También agregamos un montón de filas con una función y definimos un espacio para nuestras imágenes, usando . Pero el nuevo jugador aquí es el . Llegaremos a eso en un segundo.auto-fitminmax()repeat()grid-gapgrid-auto-flow: dense;

.gallery  .gallery__list {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));  grid-template-rows: repeat(6, 200px);  grid-gap: 1rem;  grid-auto-flow: dense;}

También creamos un patrón de repetición usando el nth-child()pseudoselector para establecer diferentes tamaños para nuestras pistas usando grid-column y grid-row. Observe aquí que estamos usando la spanpalabra clave para permitir que el elemento seleccionado ocupe más de una columna o fila.

/* This will create 2x images every 4 elements */.gallery  .gallery__list  li:nth-child(4n) {  grid-column: span 2; /* Spans two columns */  grid-row: span 2; /* Spans two rows */}/* This will create 3x images every 8 elements */.gallery  .gallery__list  li:nth-child(8n) {  grid-column: span 3;  grid-row: span 3;}

Y finalmente, nos aseguraremos de que nuestras imágenes cubran todo el área de su contenedor, sin importar si es 1x, 2x o 3x, usando object-fit: cover;. Si nunca ha oído hablar de object-fit, funciona de manera bastante similar background-image, pero con imgetiquetas HTML:

.gallery  .gallery__list  li  figure  img {  width: 100%;  height: 100%;  object-fit: cover;}

Ahora, lo importante aquí es grid-auto-flow: dense;… Observa lo que sucede cuando lo eliminamos de nuestro código:

¿Ves esos huecos en nuestra cuadrícula bellamente diseñada? Eso se debe a que algunos de los elementos ocupan el doble o el triple de lugares, y cuando no hay suficiente espacio en nuestras pistas para que quepan, se envolverán en una nueva fila, ya que ese es el comportamiento predeterminado. Al cambiarlo de rowa dense, le estamos indicando a la cuadrícula que rellene cualquier hueco que podamos tener con elementos que puedan caber en ellos, independientemente de su orden de origen en el DOM.

Por eso, esta técnica puede resultar especialmente útil para cosas como galerías de imágenes, pero puede no ser adecuada para otros casos de uso en los que es posible que necesites conservar el orden del marcado. No dudes en experimentar con la demostración de CodePen para comprobar las diferencias entre la ubicación de los elementos.

Diseño n.° 3: diseño de tarjeta al estilo Trello

Ahora, pasemos a la última demostración, donde aprovecharemos la capacidad de anidar cuadrículas para recrear este tablero Trello. Crearemos una cuadrícula para contener nuestras cuatro columnas diferentes y, dentro de ellas, crearemos una cuadrícula secundaria para nuestras tarjetas. Aunque este ejemplo no explorará nuevas propiedades ni métodos revolucionarios, nos ayudará a comprender lo fácil que es crear diseños complejos con unas pocas líneas de código CSS. Esta demostración tiene mucho código adicional para lograr el estilo del diseño de Trello, por lo que nos centraremos únicamente en los estilos de cuadrícula.

Las columnas

Para crear las cuatro columnas, usaremos display: grid;el contenedor y usaremos nuestra frase mágica para nosotros grid-template-columns. También definiremos un espacio entre ellos y lo usaremos align-items: flex-start;para asegurarnos de que nuestras columnas no se extiendan hasta la parte inferior de la pantalla.

.column__list {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));  grid-gap: .5rem;  align-items: flex-start;}

Ahora bien, el Trello original no es responsivo de manera predeterminada: si cambias el tamaño de tu navegador en un tablero de Trello, notarás que terminarás teniendo un desplazamiento horizontal en tus columnas, en lugar de envolverlas en una nueva fila. No estamos siguiendo ese comportamiento aquí porque queremos crear diseños responsivos, pero en caso de que tengas curiosidad y quieras emular la funcionalidad de Trello, puedes lograrlo agregando dos líneas más de código CSS:

.column__list {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));  grid-gap: .5rem;  align-items: flex-start;  /* Uncomment these lines if you want to have the standard Trello behavior instead of the column wrapping */  grid-auto-flow: column;  grid-auto-columns: minmax(260px, 1fr);}  

Aprendimos sobre esto grid-auto-flowen nuestra demostración anterior y descubrimos que nos permitía controlar cómo funciona el algoritmo de colocación automática y cómo se deben agregar los elementos implícitos en el flujo de la cuadrícula. El comportamiento predeterminado es row, lo que significa que cualquier elemento adicional que no quepa en nuestra cuadrícula se ajustará en una nueva línea. Cambiamos eso para que esté denseen nuestra demostración anterior y lo cambiaremos para que esté columnen esta: De esa manera, cualquier nueva columna agregada aquí terminará en una columna implícita y tendrá un desplazamiento horizontal. También definiremos un ancho para esas columnas generadas automáticamente con la grid-auto-columnspropiedad.

Las cartas

Para la cuadrícula de tarjetas, utilizaremos un enfoque similar. Estaremos display: grid;en el contenedor. No definiremos ninguna columna aquí, ya que no queremos tener ninguna, y haremos grid-template-rows: auto;uso de métodos para evitar que todas las tarjetas tengan la misma altura: queremos que algunas sean más grandes y otras más pequeñas, según el tipo de contenido que se les agregue.

.card__list {  display: grid;  grid-template-rows: auto;  grid-gap: .5rem;  margin: .5rem 0;}

Y, de nuevo, ¡eso es todo, amigos! Dos líneas más para establecer un espacio y un margen para las tarjetas, ¡y listo! Todo lo demás en el Pen es CSS estándar para lograr el aspecto y el estilo de Trello.

Entonces… ¿las consultas de medios están muertas?

En el pasado, cuando creímos diseños con display: inline-blockelementos flotantes, las consultas de medios tenían mucho sentido para cambiar el tamaño de nuestros elementos a medida que la ventana gráfica se hacía más pequeña. Pero ahora, con los diseños increíblemente poderosos que podemos crear con un par de líneas CSS, es posible que sientas la tentación de pensar que las consultas de medios están condenadas al fracaso. No estoy de acuerdo con eso: creo que deberíamos cambiar la forma en que pensamos en ellas y, por lo tanto, usarlas de manera diferente.

Como dijo Rachel Andrew hace un año, deberíamos usar consultas de medios para corregir nuestro diseño cuando falla, en lugar de apuntar a dispositivos: ¡Hay tantos por ahí! Con la llegada de las consultas de medios de nivel 4 y 5, no solo podemos detectar tamaños de pantalla, sino también tipos de puntero. Como resultado, podemos profundizar en las preferencias del sistema de un usuario y adaptar nuestro código para aquellos que prefieren un movimiento reducido o si deberíamos usar colores invertidos. Eso significa que las consultas de medios no están muertas; por otro lado, diría que es un momento emocionante para usar consultas de medios, pero debemos aprender a usarlas correctamente. Mientras tanto, crear diseños robustos utilizando técnicas modernas como Flexbox o CSS Grid le ahorrará un montón de tiempo, código y dolores de cabeza.