CSS Grid — tutorial de layout responsive

Aprende CSS Grid: grid-template-columns, unidades fr, grid-template-areas y grids responsive sin media queries innecesarias.

CSS Grid for Page Layouts

CSS Grid maneja layouts bidimensionales — estructuras completas, dashboards y galerías. Es el reemplazo moderno de layouts complejos con float y posicionamiento.

Why CSS Grid Matters

Grid handles two-dimensional layouts that Flexbox cannot — dashboards, galleries, and full-page templates are faster with Grid.

auto-fit and minmax() create responsive columns without a single media query — a pattern every responsive site should use.

CSS Grid — Key Ideas You Must Know

grid-template-columns: repeat(3, 1fr)
gap para espacio filas/columnas
grid-template-areas para layouts con nombres
minmax() para columnas adaptativas
grid-column y grid-row para spanning

CSS Grid Code Example

CSS

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

Practice CSS Grid with Free Lessons

Construye una cuadrícula de tarjetas responsive con el tutorial CSS de Sturdee.

Tip: Free interactive lesson: /tutorials/css/css_layout — practice CSS Grid with runnable code on Sturdee.

Tutorial CSS Grid — FAQ

Frequently Asked Questions

¿Puedo usar Grid y Flexbox juntos?+

Sí. Grid para la página; Flexbox dentro de celdas para el interior del componente.

Tutorial CSS Grid — plantillas, gaps y áreas