Ejercicio: CSS Grid

⏱ 40 minutos
📶 Nivel: principiante

Objetivo

Maquetar con Grid un layout de página con áreas con nombre, una galería adaptable y un formulario alineado.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

pagina.html

<div class="pagina">
  <header class="cab">Cabecera</header>
  <nav class="lateral">Menú</nav>
  <main class="principal">Contenido principal</main>
  <aside class="extra">Extra</aside>
  <footer class="pie">Pie</footer>
</div>
<ul class="galeria">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
<div class="formulario">
  <label for="a">Nombre</label><input id="a">
  <label for="b">Correo</label><input id="b">
</div>

✏️ Prueba tu CSS aquí (opcional)

Código (edítalo)

<style>
  /* escribe tu CSS */
</style>
<div class="pagina">
  <header class="cab">Cabecera</header>
  <nav class="lateral">Menú</nav>
  <main class="principal">Contenido principal</main>
  <aside class="extra">Extra</aside>
  <footer class="pie">Pie</footer>
</div>
<ul class="galeria">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
<div class="formulario">
  <label for="a">Nombre</label><input id="a">
  <label for="b">Correo</label><input id="b">
</div>

Resultado

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Escribe *, *::before, *::after { box-sizing: border-box; } y body { margin: 0; font-family: system-ui, sans-serif; }.
Haz de .pagina una cuadrícula con columnas 200px 1fr 160px, filas auto 1fr auto, gap: 12px y min-height: 400px.
Define grid-template-areas con "cab cab cab", "lat main extra" y "pie pie pie" y asigna cada elemento a su área.
Haz que .galeria use repeat(auto-fit, minmax(120px, 1fr)) con gap: 12px, sin viñetas (list-style: none) y sin relleno (padding: 0).
Haz que los li de la galería sean cuadrados (aspect-ratio: 1) y centra su número con display: grid; place-items: center.
Haz que el primer li ocupe 2 columnas (grid-column: span 2).
Convierte .formulario en una cuadrícula de dos columnas max-content 1fr, con gap: 10px 14px y align-items: center.

💡 Pista 1: mis áreas no funcionan

Cada fila de grid-template-areas debe tener el mismo número de celdas, y cada nombre tiene que usarse con grid-area. Revisa que no haya errores de escritura en los nombres.

💡 Pista 2: la galería no se adapta

Asegúrate de usar auto-fit (con repeat) y minmax(120px, 1fr). Con fr fijos como repeat(3, 1fr) siempre tendrás 3 columnas.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código CSS

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

estilos.css

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }

.pagina {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "cab  cab   cab"
    "lat  main  extra"
    "pie  pie   pie";
  gap: 12px;
  min-height: 400px;
}
.cab       { grid-area: cab; }
.lateral   { grid-area: lat; }
.principal { grid-area: main; }
.extra     { grid-area: extra; }
.pie       { grid-area: pie; }

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
}
.galeria li {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #4f46e5;
  color: #fff;
}
.galeria li:first-child { grid-column: span 2; aspect-ratio: auto; }

.formulario {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 14px;
  align-items: center;
}

💡 🏁 Reto extra (opcional)

Haz que en pantallas menores de 700px las áreas se reorganicen en una sola columna (grid-template-areas con un nombre por fila). Pruébalo con el modo dispositivo de F12.