Aplicar media queries en CSS Grid

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

Las media queries o, en español, consultas de medios son una herramienta del diseño web que nos permite cambiar las propiedades de nuestros elementos según las características de la máquina usada. En esta ocasión, te enseñaremos cómo aplicar media queries en CSS Grid para modificar la disposición de tus elementos según el dispositivo en el que se consulte tu página web.

¿Para qué sirven las media queries?

En posts anteriores no solo te hemos enseñado cómo funcionan las media queries en CSS, sino también cómo usarlas para cambiar las propiedades de tus títulos según el dispositivo en el que se vean. Como has podido leer en estos posts, las consultas de medios nos ayudan a modificar nuestra página web y adaptarla a las necesidades del usuario y su máquina. Esta forma de pensar en el diseño web se llama diseño responsive y se basa en que una página web debe construirse para ser flexible a las características de consulta.

La característica de consulta más usada es el ancho de la pantalla, normalmente definido en píxeles. Esta es una característica muy utilizada porque de ella depende la disposición de los elementos dentro del viewport. Una pantalla ancha requiere más espacio entre los elementos, mientras que una pantalla delgada requiere un nuevo posicionamiento. Por ello, existen distintos patrones de layout para diseño responsive que nos dan una guía de cómo modificar la disposición de nuestros elementos para cada pantalla.

CSS Grid es un sistema de posicionamiento avanzado que nos permite ubicar elementos en nuestra página web a partir de una cuadrícula diseñada por nosotros. Es decir, esta cuadrícula nos permite definir la disposición o layout de elementos de una página web. Por ello, aplicar media queries en CSS Grid nos permitirá modificar la disposición de elementos en la cuadrícula según el ancho de la pantalla y así crear una página web con diseño responsive. A continuación, te explicamos cómo hacerlo.

¿Cómo aplicar media queries en CSS Grid?

CSS Grid nos permite diseñar cuadrículas que crean distintos layouts de muchas maneras. Sin embargo, en este post trabajaremos con cuadrículas basadas en áreas. Entonces, lo que podemos hacer al aplicar media queries en CSS Grid es cambiar la forma en la que ubicamos las áreas de nuestro grid para que tengan sentido con las distintas pantallas en las que se verá nuestra página web.

Para aplicar media queries en CSS Grid usamos la directiva @media, al igual que en el caso de títulos y demás elementos. Ten presente que podemos insertar más de una consulta de medios si queremos tener más de un solo cambio de layout. Esto es una decisión completamente personal. Hay quienes solo diseñan para el cambio entre móvil y ordenador. Para hacerlo, puedes insertar un ancho mínimo de 768px para los layout de ordenador o crear tu layout móvil y darle un media query con un ancho máximo de 767px. Este valor también puede variar, pero las pantallas móviles suelen considerarse todas aquellas menores a 768px.

Como ejemplo, hemos decidido que tendremos seis áreas llamadas header, nav, main, redes, contacto y footer. A continuación, te mostramos cómo escribiríamos nuestras líneas de código para crear un layout de una columna para móvil y un layout de dos columnas para tablet.

  • El layout para móvil se puede escribir de la siguiente manera:

@media (max-width: 767px) {

.container {

grid-template-areas:

«header»

«main»

«nav»

«redes»

«contacto»

«footer»

}

  • El layout para tablet se puede escribir usando los valores de ancho mínimo 768px y ancho máximo 1023px. Ten presente que, además de determinar las áreas en dos columnas, deberás modificar la propiedad grid-template-columns de CSS Grid. Esto debes hacerlo porque, si ya tienes definidas un número de columnas, por ejemplo, tres, no importa que tus áreas solo ocupen dos, esta tercera columna seguirá existiendo y creará un espacio vacío en tu web. Entonces, podrías disponer de tus elementos en tablet de la siguiente manera:

@media (min-width: 768px) and (max-width: 1023px) {

.container {

grid-template-areas:

«header header»

«nav main»

«redes contacto»

«footer footer»

}

Si quieres conocer más sobre el diseño receptivo o diseño responsive y sobre cómo utilizar las distintas herramientas de CSS para aplicarlo en una página web, te recomendamos leer el artículo de la página oficial de Mozilla Developer Network sobre el diseño receptivo. Allí encontrarás su historia, ejemplos y formas para hacer que distintos elementos sean receptivos.

¿Qué sigue?

Ahora que sabes cómo aplicar media queries en CSS Grid para crear distintos layouts en una página web, ¡es hora de poner este conocimiento en práctica! En KeepCoding creemos que la mejor manera de aprender a dominar el desarrollo web es combinar la teoría con la práctica. Por ello, te invitamos a seguir aprendiendo con nosotros en nuestra formación intensiva Desarrollo Web Full Stack Bootcamp. Allí aprenderás, entre muchas otras cosas, a crear y diseñar tu propia página web. ¿A qué esperas para inscribirte? ¡Hazlo ya y conviértete en un experto del sector tecnológico en pocos meses!

👉 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!