1. Principios de los Layouts Modernos

Los navegadores actuales ofrecen dos motores de layout principales: CSS Grid y Flexbox. Ambos permiten construir diseños complejos con menos código y mayor control que los métodos tradicionales basados en float o position.

• Declarativo: describimos la estructura y el navegador se encarga de la distribución.
• Responsivo por naturaleza: con minmax(), auto-fill y flex‑wrap se adaptan a cualquier ancho.
• Accesible: los flujos de contenido siguen el orden del DOM, favoreciendo lectores de pantalla.

2. CSS Grid: Fundamentos y Ejemplos

Grid funciona como una tabla bidimensional. Cada elemento se coloca en una celda definida por filas y columnas.

2.1. Grid básico

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Este código crea una cuadrícula que se adapta automáticamente al ancho disponible, manteniendo un ancho mínimo de 200 px por columna.

2.2. Layout de página completa con Grid

<div class="page-grid">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="content">Main content</main>
  <aside class="ads">Ads</aside>
  <footer class="footer">Footer</footer>
</div>

.page-grid {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "ads     content"
    "footer  footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}
.header   { grid-area: header; }
.sidebar  { grid-area: sidebar; }
.content  { grid-area: content; }
.ads      { grid-area: ads; }
.footer   { grid-area: footer; }

Con grid-template-areas declaramos la disposición visual sin mover el HTML.

3. Flexbox: Cuándo Usarlo y Ejemplos Prácticos

Flexbox es ideal para alineaciones unidimensionales (filas o columnas). Se destaca en menús, tarjetas y componentes de barra de herramientas.

3.1. Barra de navegación flexible

<nav class="nav">
  <a href="#">Home</a>
  <a href="#">Products</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

.nav {
  display: flex;
  justify-content: space-between; /* separa los enlaces */
  flex-wrap: wrap;               /* colapsa en móvil */
  gap: 1rem;
}
.nav a {
  padding: .5rem 1rem;
  text-decoration: none;
  color: #333;
}

3.2. Tarjetas con altura igual

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 250px;               /* ancho mínimo */
  display: flex;
  flex-direction: column;       /* contenido interno */
}
.card-body {
  flex-grow: 1;                 /* fuerza la igual altura */
}

4. Layouts Híbridos: Combinando Grid y Flexbox

En proyectos reales, combinar ambos modelos brinda lo mejor de cada mundo. Por ejemplo, usar Grid para la estructura global y Flexbox dentro de cada celda para alinear componentes.

<section class="gallery grid-container">
  <article class="card">
    <img src="..." alt="...">
    <div class="card-body">
      <h3>Título</h3>
      <p>Descripción</p>
    </div>
    <footer class="card-footer">Footer</footer>
  </article>
  
</section>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: .5rem;
  overflow: hidden;
}
.card-body { flex-grow: 1; padding: 1rem; }
.card-footer { background:#f8f8f8; text-align:center; padding:.5rem; }

5. Técnicas Avanzadas (2024)

• Subgrid: permite que los hijos hereden la cuadrícula del contenedor, ideal para tablas internas.
• CSS Variables + media queries: facilita temas y breakpoints dinámicos.
• Container Queries (@container): adapta el estilo según el tamaño del contenedor, no solo el viewport.

5.1. Ejemplo de Container Queries

.card { container-type: inline-size; }
@container (min-width: 300px) {
  .card { grid-template-columns: 1fr 2fr; }
}

Esto permite que la tarjeta cambie su layout cuando su propio ancho supera los 300 px, sin importar el ancho de la ventana.

6. Comparativa de Características

7. Buenas Prácticas, Rendimiento y Escalabilidad

1. Minimiza la profundidad del árbol DOM: menos nodos = menos cálculo de layout.
2. Usa unidades relativas (fr, vw, rem) para evitar re‑flows innecesarios.
3. Evita combinaciones conflictivas como float + grid.
4. Pre‑compila CSS con PostCSS o Tailwind (solo si necesitas utilities).
5. Lazy‑load de imágenes y fuentes para reducir el tiempo de renderizado.

8. Accesibilidad y SEO

Un layout bien estructurado mejora la indexación y la experiencia de usuarios con lectores de pantalla.

• Mantén el orden lógico del DOM (header → nav → main → aside → footer).
• Utiliza role y aria‑label cuando sea necesario.
• Los elementos section y article facilitan la segmentación del contenido para los motores de búsqueda.

9. Depuración y Troubleshooting

Herramientas clave:

• DevTools → Layout: visualiza áreas de Grid y Flexbox.
• CSS Grid Inspector (Chrome/Edge) para ver líneas y áreas.
• Reglas de display: contents pueden romper la herencia de Grid; úsalo con cautela.

Problemas comunes y soluciones: