CSS Grid: filas, columnas, gap, fr, repeat y minmax paso a paso

Después de aprender Flexbox, el siguiente sistema fundamental de maquetación en CSS es Grid.

Mientras Flexbox resulta excelente para distribuir elementos principalmente en una dimensión, CSS Grid permite trabajar de forma muy natural con filas y columnas al mismo tiempo.

¿Qué es CSS Grid?

CSS Grid es un sistema de layout bidimensional. Permite definir una cuadrícula y ubicar elementos dentro de filas y columnas.

Para activarlo utilizamos:

.contenedor {
    display: grid;
}

Los hijos directos del contenedor pasan a ser elementos de la cuadrícula.

Primer ejemplo

HTML:

<section class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</section>

CSS:

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

Esto crea dos columnas del mismo ancho.

La unidad fr

fr representa una fracción del espacio disponible.

.grid {
    grid-template-columns: 1fr 1fr 1fr;
}

En este caso se crean tres columnas iguales.

También podemos repartir el espacio en proporciones diferentes:

.grid {
    grid-template-columns: 2fr 1fr;
}

La primera columna ocupará aproximadamente el doble que la segunda.

grid-template-columns

Define las columnas de la cuadrícula.

.grid {
    grid-template-columns: 200px 1fr 1fr;
}

Aquí tenemos una primera columna fija de 200px y dos columnas flexibles.

grid-template-rows

Permite definir las filas.

.grid {
    grid-template-rows: 100px 200px;
}

repeat()

Cuando repetimos medidas, podemos simplificar usando repeat().

.grid {
    grid-template-columns: repeat(3, 1fr);
}

Esto equivale a:

grid-template-columns: 1fr 1fr 1fr;

gap

Al igual que en Flexbox, Grid permite separar elementos con gap.

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

column-gap y row-gap

También podemos controlar cada separación de forma independiente.

.grid {
    column-gap: 30px;
    row-gap: 15px;
}

Columnas responsive con auto-fit

Uno de los patrones más útiles de Grid combina repeat(), auto-fit y minmax().

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

Esto permite que el navegador cree automáticamente tantas columnas como entren, manteniendo un ancho mínimo de 250px.

minmax()

minmax() define un tamaño mínimo y uno máximo.

minmax(250px, 1fr)

Significa:

• mínimo: 250px;
• máximo: una fracción del espacio disponible.

auto-fit vs auto-fill

Ambos ayudan a generar columnas automáticamente.

Como idea inicial:

• auto-fit puede expandir las columnas existentes para ocupar el espacio disponible;
• auto-fill mantiene la lógica de las columnas posibles aunque algunas queden vacías.

En muchos diseños de tarjetas, auto-fit es una opción muy práctica.

Ubicar elementos por líneas

Grid numera las líneas que separan filas y columnas.

Podemos decir que un elemento comience en una línea y termine en otra.

.destacada {
    grid-column: 1 / 3;
}

El elemento ocupará desde la línea 1 hasta la 3, es decir, dos columnas.

grid-column

También podemos usar span.

.destacada {
    grid-column: span 2;
}

Esto indica que el elemento debe ocupar dos columnas.

grid-row

La misma lógica se aplica a las filas.

.alto {
    grid-row: span 2;
}

grid-column-start y grid-column-end

La forma abreviada:

grid-column: 1 / 3;

equivale a:

grid-column-start: 1;
grid-column-end: 3;

Alinear elementos en Grid

Grid también permite controlar la alineación.

justify-items

.grid {
    justify-items: center;
}

Alinea los elementos horizontalmente dentro de sus celdas.

align-items

.grid {
    align-items: center;
}

Alinea los elementos verticalmente dentro de sus celdas.

place-items

Podemos combinar ambas:

.grid {
    place-items: center;
}

Alinear toda la cuadrícula

También existen propiedades para distribuir la cuadrícula completa dentro del contenedor:

justify-content
align-content
place-content

Ejemplo de galería

HTML:

<section class="galeria">
    <div class="foto">Foto 1</div>
    <div class="foto">Foto 2</div>
    <div class="foto">Foto 3</div>
    <div class="foto">Foto 4</div>
    <div class="foto">Foto 5</div>
    <div class="foto">Foto 6</div>
</section>

CSS:

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

.foto {
    padding: 2rem;
    background-color: #e5e7eb;
    border-radius: 10px;
}

Ejemplo de layout de página

HTML:

<div class="pagina">
    <header>Cabecera</header>
    <aside>Menú lateral</aside>
    <main>Contenido principal</main>
    <footer>Pie de página</footer>
</div>

CSS:

.pagina {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

header {
    grid-column: 1 / -1;
}

footer {
    grid-column: 1 / -1;
}

-1 representa la última línea de la cuadrícula.

grid-template-areas

Grid permite asignar nombres a zonas de la página.

.pagina {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-areas: "header header" "sidebar main" "footer footer";
}

Después asignamos cada elemento:

header {
    grid-area: header;
}

aside {
    grid-area: sidebar;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

Esta sintaxis puede hacer que layouts complejos sean más fáciles de visualizar.

Flexbox vs Grid

No son tecnologías rivales. Se complementan.

Como orientación inicial:

Flexbox → distribución principalmente en una dimensión
Grid    → distribución en filas y columnas

Por ejemplo, podemos utilizar Grid para organizar una página y Flexbox dentro de una cabecera o una tarjeta.

Grid y Flexbox juntos

CSS:

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

.tarjeta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Grid distribuye las tarjetas, mientras Flexbox organiza el contenido interno de cada tarjeta.

Errores comunes

• confundir Grid con Flexbox y tratar de resolver todo con una sola herramienta;
• olvidar display: grid en el contenedor;
• usar columnas rígidas que no entran en pantallas pequeñas;
• no aprovechar repeat();
• no aprovechar minmax();
• confundir líneas de Grid con columnas;
• usar demasiada ubicación manual cuando el flujo automático ya resuelve el diseño;
• crear layouts visuales que alteren de forma confusa el orden lógico del contenido.

Ejercicio para practicar

Partiendo de:

<section class="proyectos">
    <article>Proyecto 1</article>
    <article>Proyecto 2</article>
    <article>Proyecto 3</article>
    <article>Proyecto 4</article>
    <article>Proyecto 5</article>
    <article>Proyecto 6</article>
</section>

Intentá:

• crear tres columnas con repeat();
• agregar separación con gap;
• convertir luego el diseño en responsive con auto-fit y minmax();
• hacer que el primer proyecto ocupe dos columnas;
• probar place-items;
• comparar el resultado con una solución equivalente en Flexbox.

Qué aprendimos

• display: grid;
• grid-template-columns;
• grid-template-rows;
• unidad fr;
• repeat();
• gap;
• minmax();
• auto-fit y auto-fill;
• grid-column;
• grid-row;
• alineación;
• grid-template-areas;
• diferencias entre Grid y Flexbox.

Seguí aprendiendo CSS

La guía anterior es:

Flexbox en CSS: display flex, justify-content, align-items, gap y dirección

El próximo paso será aprender a crear diseños responsive con media queries, breakpoints y técnicas para adaptar una web a celulares, tablets y escritorio.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal