En este artículo, aprenderás a crear un layout utilizando CSS Grid Layout combinado con Media Queries para hacerlo responsivo. Te mostraré cómo configurar el HTML y CSS necesarios para lograr un diseño adaptable a diferentes tamaños de pantalla. ¡Comencemos!
Paso 1: Configurar el Entorno
Para empezar, abriremos nuestro editor de código favorito, en este caso, Visual Studio Code. Crearemos un archivo index.html e inicializaremos el documento con la estructura básica de HTML5.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<header class="header">Header</header>
<aside class="left">Left</aside>
<article class="article">Article</article>
<aside class="right">Right</aside>
<footer class="footer">Footer</footer>
</div>
</body>
</html>Explicación del HTML
Contenedor Principal: Usamos un
<div>con la clasegrid-containerpara agrupar todos los elementos del layout.Elementos del Layout: Incluimos
header,aside(para el menú lateral izquierdo y derecho),article(para el contenido principal) yfooter.
Paso 2: Estilizar el Layout con CSS
Crearemos un archivo styles.css donde definiremos los estilos para nuestro layout.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: 150px auto 150px;
grid-template-rows: repeat(3, 100px);
gap: 10px;
background-color: beige;
padding: 10px;
}
.grid-container > * {
background-color: brown;
color: white;
padding: 20px;
border: 1px solid black;
text-align: center;
}
.header {
grid-column: 1 / span 3;
}
.footer {
grid-column: 1 / span 3;
}Explicación del CSS
Estilos Globales: Aseguramos que el
box-sizingseaborder-boxy eliminamos los márgenes delbody.Contenedor de la Cuadrícula: Definimos una cuadrícula de tres columnas (150px, auto, 150px) y tres filas de 100px cada una. Usamos
gappara añadir espacio entre los elementos.Elementos del Layout: Estilizamos los elementos del layout con un fondo marrón, texto blanco, y un borde negro. También centramos el texto.
Header y Footer: Hacemos que el
headery elfooterocupen las tres columnas usandogrid-column.
Paso 3: Hacer el Layout Responsivo con Media Queries
Para que nuestro layout se adapte a diferentes tamaños de pantalla, usaremos Media Queries. Queremos que cuando la pantalla sea menor de 600px de ancho, los elementos se organicen en una sola columna.
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.header, .left, .article, .right, .footer {
grid-column: 1 / -1;
}
}Explicación del CSS Responsivo
Media Query: Definimos una media query para pantallas con un ancho máximo de 600px.
Reorganización del Contenedor: Cambiamos la plantilla de columnas a una sola columna (
1fr), permitiendo que los elementos se apilen verticalmente.Reorganización de Elementos: Aseguramos que todos los elementos ocupen toda la columna disponible usando
grid-column: 1 / -1.
Ver el Resultado
Al abrir el archivo HTML en un navegador, deberías ver el layout en acción. En una pantalla ancha, el diseño se organizará en tres columnas, y al reducir el ancho de la ventana a menos de 600px, los elementos se apilarán en una sola columna.
Conclusión
CSS Grid Layout combinado con Media Queries es una herramienta poderosa para crear diseños web responsivos. En este artículo, hemos aprendido cómo configurar un layout básico y adaptarlo a diferentes tamaños de pantalla. ¡Prueba estos ejemplos en tus proyectos y descubre el potencial del CSS Grid Layout!
