Grid adaptable y áreas

La línea que resuelve el problema de ayer

.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. Esta línea es probablemente la más rentable de toda la unidad.

auto-fit contra auto-fill

Se parecen y hacen cosas distintas cuando sobra sitio:

La forma de verlo es la experimentación: pon tres tarjetas en una pantalla ancha y cambia una palabra por la otra. Con auto-fit las tres se estiran; con auto-fill se quedan a la izquierda con su tamaño.

Colocar elementos concretos

A veces un elemento debe ocupar más de una celda:

.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 */
}

span suele ser más robusto: no depende de dónde acabe cayendo el elemento, cosa que cambia al variar el número de columnas.

Á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 móvil 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 el móvil hemos puesto el contenido antes que el lateral, y el HTML no ha cambiado. Grid permite reordenar visualmente.

Flexbox o Grid

No compiten. Una regla inicial que funciona:

1. Una dimensión · Flexbox
2. Filas y columnas a la vez · Grid

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

Reto 3 · ¿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.

Ver respuesta del Reto 3

1 · Flexbox. Una línea de enlaces que miden lo que miden.

2 · Grid. Filas y columnas que deben alinearse.

3 · Flexbox. Una dimensión y dos elementos.

4 · Ninguno. El flujo normal ya apila bloques; basta con márgenes o un gap si lo envuelves. No todo necesita un sistema de layout.

5 · Grid para la cuadrícula, y Flexbox dentro de cada tarjeta. Los dos.

6 · Grid. Además el indicador ancho se resuelve con span 2, que en Flexbox sería incómodo.

7 · Flexbox con space-between. Una dimensión.

8 · Grid si las tres columnas deben tener el mismo ancho; Flexbox si cada una puede medir lo suyo. Aquí las dos respuestas son defendibles, y lo que se evalúa es la justificación.

Tarea 11 · Grid Challenge

A · El catálogo que se adapta solo. 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. Prueba también con auto-fill y explica en un comentario cuál has elegido y por qué.

B · El esqueleto de página. Construye este layout con grid-template-areas:

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

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

Estoy atascado · un elemento no cae donde quiero

Abre el inspector de Grid y mira la numeración real de las líneas. El error casi siempre es contar columnas en lugar de líneas: para ocupar las dos primeras columnas hace falta 1 / 3, no 1 / 2.

Y si usas áreas, comprueba que todas las filas del dibujo tienen el mismo número de nombres. Si una fila tiene dos y otra tres, la plantilla entera es inválida y se ignora en silencio.

Ver respuestas

1 · Crea tantas columnas como quepan, de al menos 16rem cada una, repartiéndose el espacio sobrante.

2 · Cuando sobra espacio, auto-fit colapsa las columnas vacías y estira las que hay; auto-fill las mantiene y deja los elementos con su tamaño.

3 · Que el orden del teclado sigue al HTML, así que un reordenado grande hace que el foco salte por la pantalla sin lógica.

---