10.1 Combinando con media queries
CSS Grid Layout ofrece herramientas geniales para crear diseños complejos y adaptativos. Combinar CSS Grid con media queries permite crear diseños que se adaptan a diferentes tamaños de pantallas y dispositivos. Veamos cómo usar media queries junto con CSS Grid para crear páginas web flexibles y adaptables.
Conceptos básicos de media queries
Las media queries permiten aplicar diferentes estilos CSS dependiendo de las características del dispositivo, como la anchura de la pantalla, altura de la pantalla, orientación de la pantalla y otros. En combinación con CSS Grid, las media queries permiten cambiar la estructura y distribución de los elementos dependiendo del tamaño de la pantalla.
Sintaxis de media queries:
@media (condición) {
/* Estilos que se aplican cuando se cumple la condición */
}
Donde «condición» es la condición bajo la cual se aplicarán los estilos.
La mayoría de las veces se utilizan condiciones relacionadas con la anchura de la pantalla, como max-width y min-width.
10.2 Cambio del número de columnas
Ejemplo de implementación completa (cambio del número de columnas según la anchura de la pantalla):
/* Estilo básico para todas las pantallas */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Para pantallas más anchas de 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Dos columnas */
}
}
/* Para pantallas más anchas de 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Tres columnas */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diseño adaptable con CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
<div class="grid-item">Elemento 5</div>
<div class="grid-item">Elemento 6</div>
</div>
</body>
</html>
Explicación del código:
- Estilo básico: crea un contenedor Grid con una columna para todas las pantallas
- Media query para pantallas más anchas de 600px: cambia el diseño a dos columnas
- Media query para pantallas más anchas de 900px: cambia el diseño a tres columnas
10.3 Dependencia del ancho de la pantalla
Ejemplo de implementación completa (cambio de la disposición de los elementos según el ancho de la pantalla):
/* Estilo básico para todas las pantallas */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
/* Para pantallas más anchas de 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* Para pantallas más anchas de 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Distribución adaptable con CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Explicación del código:
- Estilo básico: crea un contenedor Grid con cuatro filas y una columna para todas las pantallas
- Media query para pantallas más anchas de 600px: cambia el diseño a dos columnas y ajusta la disposición de las áreas: el header ocupa dos columnas, el contenido principal y la barra lateral ocupan una columna cada uno, el footer ocupa dos columnas
- Media query para pantallas más anchas de 900px: cambia el diseño a tres columnas y ajusta la disposición de las áreas: el header ocupa tres columnas, el contenido principal y la barra lateral ocupan una y dos columnas respectivamente, el footer ocupa tres columnas
10.4 Cambio de tamaños de elementos
Ejemplo de implementación completa (cambio de tamaños de elementos según el ancho de la pantalla):
/* Estilo básico para todas las pantallas */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Para pantallas más anchas de 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* Para pantallas más anchas de 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tamaños adaptables con CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Elemento 1</div>
<div class="grid-item item2">Elemento 2</div>
<div class="grid-item item3">Elemento 3</div>
<div class="grid-item item4">Elemento 4</div>
<div class="grid-item item5">Elemento 5</div>
<div class="grid-item item6">Elemento 6</div>
</div>
</body>
</html>
Explicación del código:
- Estilo básico: crea un contenedor Grid con dos columnas y filas automáticas con altura de
100pxpara todas las pantallas - Media query para pantallas más anchas de 600px: cambia el diseño a tres columnas y aumenta la altura de las filas a
150px - Media query para pantallas más anchas de 900px: cambia el diseño a cuatro columnas y aumenta la altura de las filas a
200px
GO TO FULL VERSION