Ejercicio 6 – Layout típico: header / sidebar / main / footer

📄 Objetivo

Aprender a usar CSS Grid para definir la estructura general de una página en dos dimensiones (filas y columnas)[cite: 364]. Utilizaremos áreas con nombre para distribuir el contenido de forma semántica y sencilla.

💻 HTML base

<div class="layout">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main</main>
    <footer class="footer">Footer</footer>
</div>
          

🎯 Requisitos CSS

• Usar CSS Grid (no Flexbox para la estructura)[cite: 364].
• Layout en dos columnas: Sidebar fija y Main flexible.
• Header y footer deben ocupar todo el ancho.
• Separación uniforme entre áreas usando gap[cite: 379].

✅ Solución (CSS)

A continuación se muestra el código CSS que define la cuadrícula mediante grid-template-columns y grid-template-areas[cite: 377, 408]:

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    gap: 20px;
}

.header {
    grid-area: header;
    background-color: #ffcccc;
    padding: 20px;
}

.sidebar {
    grid-area: sidebar;
    background-color: #ccffcc;
    padding: 20px;
}

.main {
    grid-area: main;
    background-color: #ccccff;
    padding: 20px;
}

.footer {
    grid-area: footer;
    background-color: #ffffcc;
    padding: 20px;
}