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 artículos, las consultas de medios nos ayudan a modificar nuestra página web y a 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 necesita 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 este motivo, 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, de este modo, 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. 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 CSS responsive 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 css tamaños
@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 definido 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 query in css
@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 de 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!
