📘 Módulo 13: Layouts completos con Grid y Flexbox

Construir layouts reales combinando Grid y Flexbox. Aprender a estructurar una página con reader, main, sidebar y footer.

Objetivos

Construir layouts reales combinando Grid y Flexbox.
Aprender a estructurar una página con header, main, sidebar y footer.
Crear layouts responsivos que se adapten a distintos dispositivos.
Integrar componentes modernos en un diseño coherente.

🔹 1. Layout básico con Grid

css

.contenedor {
  display: grid;
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

header { grid-area: header; }
main   { grid-area: main; }
aside  { grid-area: sidebar; }
footer { grid-area: footer; }

👉 Estructura clásica de página con sidebar.

🔹 2. Responsividad con media queries

css

@media (max-width: 768px) {
  .contenedor {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

👉 En móvil, el sidebar pasa debajo del contenido principal.

🔹 3. Flexbox dentro de secciones

css

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  display: flex;
  gap: 15px;
}

👉 Flexbox organiza logo y menú en el header.

🔹 4. Ejemplo práctico: Tarjetas en Grid

css

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.tarjeta {
  background: #003366;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
}

👉 Galería adaptable que reorganiza tarjetas según el espacio disponible.

🔹 5. Combinación Grid + Flexbox

Grid: estructura general de la página.
Flexbox: alineación interna de componentes (menús, botones, iconos).
Resultado: layouts modernos, flexibles y responsivos.

📝 Actividad práctica

Crea un layout completo con header, main, sidebar y footer usando Grid.
Haz que el header use Flexbox para alinear logo y menú.
Diseña una galería de tarjetas con Grid que se adapte automáticamente al ancho de pantalla.

MÓDULO 14 CSS Animaciones