CSS Grid Avanzado

CSS Grid permite crear layouts que antes requerían hacks de CSS.

.magazine-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}
.featured {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.sidebar {
  grid-column: 4;
  grid-row: 1 / 4;
}

Propiedades Clave

• grid-template-areas: Layouts semánticos con ASCII art
• minmax(): Columnas flexibles con límites
• auto-fill vs auto-fit: Responsividad automática
• subgrid: Alinear hijos con el grid padre