Grid y responsive

Tres horas. Media hora para entender qué resuelve Grid que Flexbox no y por qué la mayoría de las adaptaciones no necesitan media query, y dos horas y media construyendo un catálogo que se adapta solo y rompiendo tu sitio a cinco anchuras.

Se explica

25 minutos · conceptos y demostración

La sesión tiene una sola idea de fondo: deja de decir cuántas columnas quieres y describe cuánto necesita cada una. Grid es la herramienta que lo permite, y el responsive es lo que sale de aplicarla bien.

Dos dimensiones a la vez

Flexbox coloca en una línea. Considera ahora este problema:

Producto  Producto  Producto
Producto  Producto  Producto
Producto  Producto  Producto

Aquí no hay una dirección: hay filas y columnas, y quieres que las columnas estén alineadas entre filas. Con Flexbox se puede aproximar, y las columnas nunca acaban de cuadrar porque cada fila reparte su espacio por su cuenta. Grid está diseñado exactamente para esto.

.catalogo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}

Tres declaraciones y tienes una cuadrícula de tres columnas con sus filas alineadas. Fíjate en que no has dicho cuántas filas hay: Grid las crea según los elementos que haya.

fr

Una fracción del espacio libre del contenedor. 1fr 1fr 1fr reparte lo disponible en tres partes iguales; 2fr 1fr da el doble a la primera columna.

Es distinta del porcentaje, y la diferencia importa: 33.33% no descuenta el gap, así que tres columnas al 33.33 % con separación desbordan. 1fr sí lo descuenta, porque reparte lo que queda después de los huecos. Por eso con Grid no tienes que hacer cuentas.

grid-template-columns: repeat(3, 1fr);   /* lo mismo, sin repetirte */
grid-template-columns: 250px 1fr;        /* una fija y otra elástica */
grid-template-columns: 1fr 2fr;          /* una parte y dos partes */

El vocabulario, y por qué se cuentan líneas

Conviene fijarse en que se numeran las líneas, no las columnas. Una cuadrícula de tres columnas tiene cuatro líneas verticales: la 1 al principio y la 4 al final. Es la fuente de casi todos los desajustes de la sesión.

La línea más rentable de la unidad

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

Léela de dentro afuera:

minmax(16rem, 1fr)    cada columna mide como poco 16rem,
                      y crece para repartirse lo que sobre

auto-fit              caben las que quepan; el número
                      lo decide el espacio disponible

Es decir: deja de decir cuántas columnas quieres y describe cuánto necesita cada una. En un móvil cabrá una, en una tablet dos, en un monitor cuatro, y no has escrito una sola media query.

Áreas con nombre

Para el esqueleto de una página completa hay una forma que se lee sola:

.layout {
    display: grid;
    grid-template-columns: 15rem 1fr;
    grid-template-areas:
        "cabecera cabecera"
        "lateral  principal"
        "pie      pie";
    gap: 1rem;
}

header { grid-area: cabecera; }
aside  { grid-area: lateral; }
main   { grid-area: principal; }
footer { grid-area: pie; }

El dibujo entre comillas es el layout. Se ve de un vistazo que la cabecera ocupa las dos columnas y que el lateral está a la izquierda del contenido. Para modificarlo en una pantalla estrecha basta con redibujarlo:

@media (width < 48rem) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "cabecera"
            "principal"
            "lateral"
            "pie";
    }
}

Fíjate en un detalle importante: en la pantalla estrecha el contenido va antes que el lateral, y el HTML no ha cambiado. Grid permite reordenar visualmente.

Flexbox o Grid

No compiten. Una regla inicial que funciona:

Una segunda pregunta afina la decisión: ¿quién debería decidir el tamaño, el contenedor o el contenido? Grid define la cuadrícula desde fuera y el contenido se acomoda; Flexbox parte de los elementos y reparte lo que sobra. Un menú cuyos enlaces miden cada uno lo suyo es Flexbox. Un catálogo cuyas tarjetas deben coincidir es Grid.

Lo más habitual en código real es que convivan:

GRID     para distribuir las tarjetas
  ↓
FLEXBOX  dentro de cada tarjeta

Primero fluido, después media queries

Quien entre a tu sitio puede hacerlo desde un móvil, una tablet, un portátil, un monitor grande, media pantalla en una ventana dividida, o un dispositivo que todavía no existe. No puedes enumerarlos.

Llevas cuatro semanas construyendo herramientas que adaptan solas:

Si las usas bien, buena parte de tu sitio ya es responsive y no lo sabías. Las media queries son para lo que queda.

Mobile first

Escribir primero los estilos de la disposición más sencilla —una columna— y añadir después las variantes para pantallas anchas con min-width, en lugar de al revés.

/* Base: una columna. Vale para cualquier pantalla. */
.catalogo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (width >= 48rem) {
    .catalogo { grid-template-columns: repeat(2, 1fr); }
}

@media (width >= 70rem) {
    .catalogo { grid-template-columns: repeat(3, 1fr); }
}

La razón no es ideológica: el caso de una columna es el más simple, y partir de lo simple para añadir complejidad da menos código que partir de lo complejo para irlo deshaciendo. La sintaxis (width >= 48rem) es la moderna y se lee sola; encontrarás también la clásica, (min-width: 48rem), que significa lo mismo.

Se trabaja

150 minutos · práctica sobre tu propio proyecto

El paso 1 provoca el problema a propósito y no lo arregla; el paso 2 lo resuelve con una sola línea. Los cuatro restantes llevan esa idea al sitio entero.

Paso 1 · Tu catálogo en cuadrícula · 20 min

En productos.html, convierte el contenedor de las fichas en un Grid.

1. Aplica display: grid y gap al contenedor de los article.
2. Prueba repeat(2, 1fr), después repeat(3, 1fr) y después repeat(4, 1fr). Quédate con la que mejor te encaje en tu pantalla.
3. Abre el inspector de Grid y localiza las líneas, las pistas y los huecos.
4. Ahora estrecha la ventana hasta 400 px y observa qué pasa con las tarjetas.

Paso 2 · El catálogo que se adapta solo · 25 min

Aplica auto-fit con minmax() a tu página de productos. Comprueba de 320 px a 1600 px que en ningún momento hay columnas ilegibles ni tarjetas gigantes.

1. Elige el mínimo de minmax() a partir del número que anotaste en el paso 1, no de una cifra redonda.
2. Prueba también con auto-fill y explica en un comentario cuál has elegido y por qué.
3. Comprueba con el inspector cuántas columnas hay a 320, 768, 1024 y 1600 px.

Paso 3 · El esqueleto de página con áreas · 30 min

Construye este layout con grid-template-areas:

┌───────────────────────────┐
│          HEADER           │
├─────────┬─────────────────┤
│ ASIDE   │      MAIN       │
│         │                 │
├─────────┴─────────────────┤
│          FOOTER           │
└───────────────────────────┘

y su versión en una columna para pantallas estrechas, con el contenido antes que el lateral. Decide tú a qué anchura cambia, y justifícalo por el contenido.

.destacado {
    grid-column: 1 / 3;    /* de la línea 1 a la 3: dos columnas */
}

.destacado {
    grid-column: span 2;   /* dos columnas, empiece donde empiece */
}

Paso 4 · ¿Flexbox, Grid, los dos o ninguno? · 15 min

Para cada interfaz, decide y justifica en una frase:

1. La navegación principal.
2. Una galería de imágenes en cuadrícula.
3. Una botonera de dos botones.
4. Un formulario de etiquetas y campos, uno debajo de otro.
5. El catálogo de productos.
6. Un panel con seis indicadores, uno de ellos del doble de ancho.
7. La barra de precio y botón dentro de una tarjeta.
8. El pie con tres columnas de enlaces.

Paso 5 · Rompe tu página · 45 min

Es el trabajo central de la sesión. Con DevTools en modo dispositivo, recorre tu sitio a estas anchuras:

320 px    móvil pequeño
375 px    móvil habitual
768 px    tablet
1024 px   portátil
1440 px   escritorio

Busca a continuación, en las cuatro páginas:

Después corrígelos, intentando primero sin media query. Si lo resuelves con flex-wrap, con minmax() o con clamp(), mejor que con un breakpoint: no hay que mantenerlo.

Paso 6 · Defiende cada breakpoint · 15 min

Recorre todas las media queries de tu hoja y rellena una fila por cada una:

Elimina las que no puedas defender. Una media query que está ahí «por si acaso», o copiada de una lista de dispositivos, es código que habrá que mantener sin saber qué protege.

Ampliación si has completado el trabajo

Primero termina y comprueba los seis pasos. El segundo reto es el que más enseña de los dos, y consiste en borrar código.

Reto 1 · Un panel de indicadores

Construye un panel de seis indicadores con estas condiciones, sin una sola media query:

┌─────────────────┬────────┐
│   FACTURACIÓN   │ PEDIDOS│
│   (doble ancho) │        │
├────────┬────────┼────────┤
│ STOCK  │ DEVOL. │ VISITAS│
├────────┴────────┴────────┤
│        INCIDENCIAS        │
│      (todo el ancho)      │
└──────────────────────────┘

1. Usa auto-fit con minmax() para las columnas, y span para los dos indicadores anchos.
2. Comprueba qué ocurre a 320 px, donde solo cabe una columna. Un span 2 en una cuadrícula de una sola columna puede romper el layout: averigua qué pasa exactamente y resuélvelo.
3. Consigue que los seis indicadores tengan la misma altura aunque su contenido sea de longitudes distintas. Di si eso lo resuelve Grid o Flexbox, y por qué.
4. Anota en cuántas disposiciones distintas se reorganiza el panel entre 320 y 1600 px. No las has escrito: las decide el contenido.

Reto 2 · Quitar breakpoints

Esta hoja resuelve un catálogo y una cabecera con seis media queries. Todas funcionan, y la mayoría sobran.

.catalogo { display: grid; grid-template-columns: 1fr; gap: 16px; }
.tarjeta h3 { font-size: 18px; }
.cabecera { display: flex; justify-content: space-between; }
.contenedor { width: 100%; padding: 0 16px; }

@media (min-width: 480px) { .catalogo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .catalogo { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .catalogo { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .tarjeta h3 { font-size: 22px; } }
@media (min-width: 1280px){ .tarjeta h3 { font-size: 26px; } }
@media (min-width: 1280px){ .contenedor { width: 1240px; margin: 0 auto; padding: 0; } }

1. Sustituye las tres primeras por una sola declaración sin media query.
2. Sustituye las dos del titular por una sola declaración sin media query.
3. Sustituye la del contenedor por una que no fije una anchura en píxeles.
4. ¿Cuántas media queries quedan al terminar? Si queda alguna, defiéndela: di qué problema de contenido resuelve que no se pueda resolver de otro modo.
5. Compara el número de líneas de las dos versiones y el número de valores que habría que revisar si mañana cambia el diseño.

Cierre

5 minutos · comprobación y recuerdo