Frontend Academy · Lección

CSS Grid para layouts

Defina filas y columnas con CSS Grid, coloque elementos con precisión y cree layouts habituales de páginas con poco código.

CSS Grid para layouts es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es CSS Grid?

CSS Grid es un sistema de diseño bidimensional: permite controlar tanto las filas como las columnas. Es la herramienta más adecuada para la estructura general de una página y para colocar elementos explícitamente en una cuadrícula definida.

Definir columnas: grid-template-columns

grid-template-columns define la estructura de las columnas. Utilice tamaños fijos (px), fracciones flexibles (fr) o auto. repeat(n, size) repite una definición de track.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}

La unidad fr

fr (unidad fraccionaria) distribuye proporcionalmente el espacio restante. 1fr 2fr proporciona a la segunda columna el doble de espacio que a la primera. Es esencial para crear tracks de cuadrícula fluidos.

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* left center right */
}

Definir filas: grid-template-rows

También puede definir filas explícitamente. Si no lo hace, el navegador crea filas implícitas automáticamente. grid-auto-rows: minmax(200px, auto) establece el tamaño de las filas implícitas.

.page {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header content footer */
  min-height: 100vh;
}

gap en Grid

Al igual que en Flexbox, gap añade espacio entre los tracks de la cuadrícula sin afectar a los bordes exteriores. row-gap y column-gap controlan los ejes por separado.

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

grid-template-areas

Asigne nombres a las áreas de la cuadrícula mediante cadenas y asigne los elementos a ellas con grid-area. Esto crea un código de diseño visual y fácil de leer.

.page {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

Colocar elementos con grid-column y grid-row

Controle exactamente dónde se coloca un elemento con grid-column: start / end y grid-row: start / end. Utilice -1 para hacer referencia a la última línea. span N abarca N tracks.

.featured {
  grid-column: 1 / -1;  /* span all columns */
  grid-row: span 2;      /* occupy two rows */
}

auto-fit y minmax() — columnas adaptables

La regla de una sola línea más potente para crear una cuadrícula adaptable es: repeat(auto-fit, minmax(280px, 1fr)). Crea tantas columnas como quepan, cada una con un ancho mínimo de 280px, y distribuye el espacio restante con 1fr.

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

auto-fill frente a auto-fit

auto-fill crea tracks aunque estén vacíos, manteniendo una cuadrícula fija. auto-fit contrae los tracks vacíos para que los elementos se expandan y llenen la fila. Utilice auto-fit para contenido que deba expandirse.

Cuadrícula implícita frente a explícita

Los tracks que define forman la cuadrícula explícita. Cuando añade más elementos de los que permiten los tracks definidos, el navegador crea tracks implícitos. Controle su tamaño con grid-auto-rows y grid-auto-columns.

Grid frente a Flexbox — cuándo utilizar cada uno

Grid: diseños bidimensionales, estructura de páginas, galerías y dashboards. Flexbox: filas o pilas unidimensionales, centrado y distribución de elementos en una fila. Se complementan: utilice Grid para la estructura base de la página y Flexbox para el interior de los componentes.

Comprobación rápida

¿Qué valor de CSS crea columnas de al menos 250px de ancho y distribuye por igual el espacio restante?

Repaso: CSS Grid

grid-template-columns define las columnas. fr distribuye el espacio. repeat() simplifica las repeticiones. gap añade espacios entre tracks. grid-template-areas hace que los diseños sean fáciles de leer. auto-fit + minmax crea cuadrículas adaptables sin media queries. Grid es la opción habitual para los diseños de páginas bidimensionales.

Preguntas frecuentes

¿La lección «CSS Grid para layouts» es gratis?

Sí — el texto completo de «CSS Grid para layouts» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «CSS Grid para layouts»?

Defina filas y columnas con CSS Grid, coloque elementos con precisión y cree layouts habituales de páginas con poco código. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «CSS Grid para layouts»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy