Creando un Sitio Responsivo con CSS Grid 🎨🖥️
CSS Grid es una técnica de layout bidimensional que permite a los desarrolladores crear layouts complejos con facilidad. En este tutorial, vamos a crear un sitio responsivo utilizando CSS Grid.
Preparando el Ambiente
Para comenzar, crea un nuevo archivo HTML y un archivo CSS. En el archivo HTML, añade una referencia al archivo CSS en el encabezado:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- El contenido de nuestro sitio va aquí -->
</body>
</html>Creando el Layout
Vamos a crear un layout simple con un encabezado, un contenido principal y un pie de página. En nuestro archivo HTML, vamos a añadir tres divs para cada una de esas secciones:
<div id="header">Encabezado</div>
<div id="main">Contenido Principal</div>
<div id="footer">Pie de Página</div>Ahora, en nuestro archivo CSS, vamos a crear un grid para organizar esas secciones:
body {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
#header {
grid-row: 1;
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
#main {
grid-row: 2;
background-color: #fff;
padding: 20px;
}
#footer {
grid-row: 3;
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}Haciendo el Layout Responsivo
El verdadero poder de CSS Grid viene de su capacidad de crear layouts responsivos. Vamos a añadir una media query a nuestro CSS para alterar el layout cuando el ancho de la ventana del navegador sea inferior a 600px:
@media (max-width: 600px) {
body {
grid-template-rows: auto 1fr auto;
}
#header,
#main,
#footer {
padding: 10px;
}
}Conclusión
¡Y eso es todo! Acabas de crear un sitio responsivo utilizando CSS Grid. Esperamos que este tutorial te haya ayudado a entender mejor cómo funciona CSS Grid y cómo puedes usarlo para crear layouts responsivos.
Para continuar aprendiendo más sobre desarrollo web y diseño responsivo, consulta el artículo sobre El Poder de CSS Flexbox: Haciendo los Layouts Más Simples y Eficaces.