Creo miniproyecto grid2
Aquí tienes un ejemplo de código HTML y CSS que utiliza Grid con áreas definidas, incluye un diseño con header, footer y bonitos colores. Este diseño es completamente adaptable a dispositivos móviles:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plantilla con Grid</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: grid;
grid-template-areas:
"header"
"main"
"aside"
"footer";
grid-template-rows: auto 1fr auto auto;
height: 100vh;
background-color: #f7f9fc;
}
header {
grid-area: header;
background-color: #3c82d6;
color: #fff;
text-align: center;
padding: 20px;
}
main {
grid-area: main;
background-color: #e6eefc;
padding: 20px;
text-align: justify;
}
aside {
grid-area: aside;
background-color: #9dc3f9;
padding: 20px;
color: #fff;
}
footer {
grid-area: footer;
background-color: #3c82d6;
color: #fff;
text-align: center;
padding: 15px;
}
@media (min-width: 768px) {
body {
grid-template-areas:
"header header"
"main aside"
"footer footer";
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr auto;
}
}
</style>
</head>
<body>
<header>
<h1>Plantilla de Diseño con Grid</h1>
</header>
<main>
<p>
Bienvenido a este diseño web creado con CSS Grid. Este diseño utiliza áreas definidas por Grid para organizar el contenido de forma clara y adaptable.
</p>
</main>
<aside>
<h2>Barra Lateral</h2>
<p>
Aquí puedes añadir enlaces, información adicional o contenido secundario.
</p>
</aside>
<footer>
<p>© 2025 - Tu Nombre</p>
</footer>
</body>
</html>
Explicación del diseño:
-
Áreas Grid:
headerocupa la parte superior.maines el contenido principal.asidees la barra lateral (columna secundaria).footerocupa la parte inferior.
-
Adaptabilidad:
- En pantallas pequeñas (por defecto), las áreas están apiladas verticalmente.
- En pantallas grandes (media query), se muestra un diseño de dos columnas con el contenido principal más ancho.
-
Colores:
- Tonos suaves y agradables para mantener la estética.
¿Te gustaría personalizar algo más?
Comentarios
Publicar un comentario