CSS Grid

CSS Grid es el sistema de layout más potente de CSS para organizar contenido en dos dimensiones: filas y columnas.

Flexbox funciona muy bien para distribuir elementos en una dirección. Grid encaja mejor cuando el layout necesita controlar filas y columnas al mismo tiempo.

Conceptos principales

• grid-template-columns: define columnas.
• grid-template-rows: define filas.
• gap: separa celdas.
• fr: reparte espacio disponible.
• minmax(): establece límites flexibles.
• auto-fit y auto-fill: crean grids responsivos.

Ejemplo

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

Este patrón crea tantas columnas como quepan, con un mínimo de 16rem por columna.

Cuándo usar Grid

• Galerías.
• Cards responsivas.
• Layouts de dashboard.
• Formularios en columnas.
• Secciones con estructura bidimensional.

Relacionado

• CSS
• CSS Grid Columns auto-fit
• CSS Subgrid
• Responsive Design
• Josh W. Comeau