CSS Grid Tutorial

Aprende a crear layouts modernos y responsivos con CSS Grid

¿Qué es CSS Grid?

CSS Grid es un sistema de diseño bidimensional que te permite crear layouts complejos de manera sencilla. A diferencia de Flexbox (que es unidimensional), Grid te permite trabajar con filas y columnas simultáneamente.

1. Grid Básico - 3 Columnas

Este es el ejemplo más simple de un grid. Creamos 3 columnas de igual tamaño usando repeat(3, 1fr) y separamos los elementos con gap: 15px.

.grid-basic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
            

2. Grid con Áreas Nombradas

Podemos crear layouts complejos definiendo áreas con nombres. Esto es perfecto para layouts de página completa.

.grid-areas {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    gap: 15px;
}
            

Contenido Principal

Aquí va el contenido principal de la página. El grid nos permite organizar el layout de forma semántica y visual.

3. Grid Responsive (Auto-fit)

Con auto-fit y minmax(), el grid se adapta automáticamente al tamaño de la pantalla sin necesidad de media queries.

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

Card 1

Redimensiona la ventana para ver cómo se adapta

Card 2

Las columnas se ajustan automáticamente

Card 3

Mínimo 200px por columna

Card 4

Totalmente responsive

4. Grid Complejo con Posicionamiento

Podemos hacer que los elementos ocupen múltiples filas y columnas usando grid-column y grid-row.

.box1 {
    grid-column: 1 / 3;  /* Ocupa columnas 1-2 */
    grid-row: 1 / 3;     /* Ocupa filas 1-2 */
}
            

Box 1
(2x2)

Box 2

Box 3

Box 4

Box 5

Propiedades Principales de CSS Grid

Contenedor (Grid Container):

display: grid - Activa el grid
grid-template-columns - Define las columnas
grid-template-rows - Define las filas
gap - Espacio entre elementos
grid-template-areas - Define áreas nombradas

Elementos (Grid Items):

grid-column - Posición en columnas
grid-row - Posición en filas
grid-area - Asigna a un área nombrada

Unidades Especiales:

fr - Fracción del espacio disponible
auto - Tamaño automático según contenido
minmax(min, max) - Rango de tamaño

Consejo Final

CSS Grid es perfecto para layouts de página completa, mientras que Flexbox es mejor para componentes más pequeños. ¡Puedes combinar ambos en tus proyectos!

Experimenta: Abre las herramientas de desarrollador (F12) y modifica los valores de CSS para ver cómo cambia el grid.