Ejercicio 8 – Página con estructura tipo dashboard

📄 Objetivo

Aplicar CSS Grid para crear una estructura de diseño más compleja, similar a la que encontramos en aplicaciones web reales (tipo panel de control o dashboard).

💻 HTML base

<div class="dashboard">
    <header class="header">Header</header>
    <nav class="menu">Menu</nav>
    <section class="contenido">Contenido</section>
    <aside class="extra">Extra</aside>
    <footer class="footer">Footer</footer>
</div>
          

🎯 Requisitos CSS

• Definir una cuadrícula con filas y columnas explícitas.
• El menú debe ocupar toda la altura lateral disponible.
• El contenido principal debe ser flexible y ocupar la mayor parte del espacio.
• El footer debe ocupar todo el ancho inferior.
• Asignar colores de fondo para diferenciar las áreas visualmente.

✅ Solución (CSS)

Usamos grid-template-areas para "dibujar" el layout y asignamos colores específicos a cada sección:

.dashboard {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header"
        "menu contenido extra"
        "footer footer footer";
    height: 100vh;
}

.header {
    grid-area: header;
    background-color: aqua;
}

.menu {
    grid-area: menu;
    background-color: rgb(66, 207, 23);
}

.contenido {
    grid-area: contenido;
    background-color: rgb(212, 209, 26);
}

.extra {
    grid-area: extra;
    background-color: rgb(196, 22, 167);
}

.footer {
    grid-area: footer;
    background-color: rgb(228, 15, 15);
}