Qué es CSS Grid y cómo crear layouts en dos dimensiones

En CSS el Grid es un sistema de maquetación bidimensional de CSS que permite dividir un contenedor en filas y columnas.

Hemos visto Flexbox (el “hermano” de Grid), que es una herramienta estupenda para alinear cosas. Sin embargo, a veces necesitamos crear estructuras globales más complejas a nivel de página entera.

Grid es la herramienta perfecta para definir la estructura general y las grandes áreas de una página web (como colocar la cabecera, la barra lateral, el contenido principal y el pie de página).

Definiendo la cuadrícula: display: grid

Para empezar a trazar nuestro tablero de layout, lo primero es convertir un contenedor padre en una cuadrícula. Al igual que pasaba con su hermano Flexbox, activamos el motor con una simple instrucción:

.contenedor-principal {
    display: grid;
}

Esto por sí solo no hace casi nada visible. Simplemente acabamos de decirl al contenedor padre, que se comporta como un CSS Grid. Falta definir sus propiedades 👇.

Filas y Columnas (template)

Usamos las propiedades grid-template-columns y grid-template-rows para trazar las líneas de nuestra cuadrícula, especificando el tamaño de cada “carril”.

.mi-cuadricula {
    display: grid;
    
    /* Queremos 3 columnas: la 1ª de 200px, la 2ª elástica, y la 3ª de 100px */
    grid-template-columns: 200px 1fr 100px;
    
    /* Queremos 2 filas de 150px de alto cada una */
    grid-template-rows: 150px 150px;
}

Fijaos en la unidad 1fr (una fracción). Es una unidad exclusiva de Grid que le dice al navegador: “Coge absolutamente todo el espacio libre que sobre en la pantalla y dáselo a esta columna”.

Columnas adaptables con minmax()

Grid se vuelve especialmente útil cuando combinamos repeat() con minmax(). Esto nos permite crear columnas que se adaptan solas al espacio disponible.

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

La frase traducida sería: “crea tantas columnas como quepan, cada una con un mínimo de 220px, y reparte el espacio sobrante entre ellas”.

Separando las celdas (gap)

Grid también soporta la propiedad gap para crear esos un espacio de separación entre nuestras celdas.

.mi-cuadricula {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Genera una separación perfecta de 20px en todas direcciones */
}

Ocupando más de una celda (grid-column)

A veces queremos que un elemento ocupe dos o tres columnas a la vez, como la típica cabecera gigante (<header>) de un sitio web.

Para lograr esto, en lugar de darle instrucciones al padre, vamos directamente al elemento hijo y le decimos desde dónde hasta dónde tiene que expandirse utilizando las “líneas” invisibles de la cuadrícula.

.cabecera {
    /* Empieza en la línea divisoria 1 y termina en la línea divisoria 4 
       (ocupando así 3 columnas enteras de forma contigua) */
    grid-column: 1 / 4;
    background-color: darkblue;
    color: white;
}

Nombrando zonas con grid-template-areas

Para layouts más complejos, Grid permite poner nombre a las zonas. Es una forma muy visual de describir la estructura.

.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: 20px;
}

header {
    grid-area: header;
}

aside {
    grid-area: sidebar;
}

main {
    grid-area: content;
}

footer {
    grid-area: footer;
}