Maquetación:
Flexbox, Grid
y diseño adaptable

Un documento sin instrucciones de acomodo coloca cada bloque debajo del anterior y cada texto a continuación del anterior. Sirve para leer de corrido, que es para lo que se diseñó la web.

En cuanto se pide una fila de tarjetas del mismo alto, o una barra con el logotipo a la izquierda y el menú pegado a la derecha, el flujo normal deja de alcanzar. Durante años eso se resolvió con float y tablas invisibles: técnicas prestadas de otra cosa, que funcionaban a medias y se rompían en cuanto el contenido crecía.

La propiedad se declara en el contenedor, y a partir de ahí sus hijos directos dejan de comportarse como bloques y pasan a ser elementos flexibles.

.barra {
  display: flex;
}

El cambio no alcanza a los nietos: cada nivel que quiera repartir a sus hijos necesita su propia declaración.

Las dos direcciones de Flexbox se llaman eje principal —aquella en que se colocan los elementos— y eje cruzado, el perpendicular. Nunca horizontal y vertical.

La propiedad flex-direction decide cuál es cuál. Con row el principal es horizontal; con column pasa a ser vertical, y todas las demás propiedades cambian de significado con él.

De ahí que las propiedades no se llamen «alinear a la izquierda» sino justify-content y align-items: los nombres son independientes de la orientación.

.barra {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

Por omisión, un contenedor flexible obliga a todo a caber en una línea: encoge las piezas hasta donde puede y, si aun así no alcanza, desborda. Con flex-wrap: wrap pasa a formar líneas nuevas.

.tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.tarjetas > * {
  flex: 1 1 260px;
}

Esas cuatro líneas producen una galería que cambia de una a cuatro columnas por sí sola, sin una sola consulta de medios.

Con Grid la estructura se declara completa desde el contenedor: cuántas columnas, de qué anchos, y cuántas filas. El contenido llega después y se acomoda en las celdas que ya existen.

.galeria {
  display: grid;
  grid-template-columns: 240px 240px 240px;
  grid-template-rows: 180px 180px;
  gap: 16px;
}

Escrita así, con medidas fijas, la retícula funciona en una pantalla y se rompe en las demás. Las tres láminas siguientes sustituyen cada número por algo que sabe adaptarse.

La unidad fr fracción · fraction reparte el espacio que queda después de descontar huecos y medidas fijas. Un porcentaje, en cambio, se calcula sobre el ancho total e ignora los huecos, así que la suma se pasa y la retícula desborda.

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

La primera columna recibe el doble que cada una de las otras dos, sea cual sea el ancho de la ventana.

Arriba, los huecos se suman al 99 % y la última columna se sale. Abajo, se descuentan antes de repartir.

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

Columnas visibles: 3

Una retícula de tres columnas tiene cuatro líneas verticales. Un elemento se coloca diciendo entre qué líneas empieza y acaba.

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

.pie {
  grid-column: 1 / -1;  /* de la primera a la última */
}

El número negativo cuenta desde el final, así que -1 significa «hasta el borde» sin necesidad de saber cuántas columnas hay. Sirve para el encabezado y el pie de cualquier plantilla.

También existe span: grid-column: span 2 ocupa dos columnas desde donde le toque, sin fijar cuáles.

Una plantilla de dos filas con diez piezas dentro no deja ocho fuera: el navegador crea las filas que hagan falta. Esas filas nuevas son la retícula implícita, y por omisión miden lo que mida su contenido.

.galeria {
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
}

grid-auto-rows les da una altura pareja. grid-auto-flow: dense permite que una pieza pequeña retroceda a rellenar un hueco anterior, a costa de alterar el orden visual respecto al del documento.

Diseño adaptable responsive web design nombra la práctica de servir el mismo HTML a cualquier dispositivo y dejar que la presentación se reorganice según el espacio disponible.

La alternativa histórica fue mantener un sitio aparte para teléfonos, con su dirección y su contenido propios. Duplicaba el trabajo y siempre acababa desactualizado respecto al principal.

<meta name="viewport"
      content="width=device-width,
               initial-scale=1">

Sin ella, un teléfono finge medir 980 px y luego reduce la página entera, con letra ilegible. Ninguna consulta de medios se activa, porque el navegador cree estar en una pantalla ancha.

/* estilos de la pantalla estrecha */
.galeria { grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .galeria { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
  .galeria { grid-template-columns: repeat(3, 1fr); }
}

Con min-width las reglas se suman conforme la pantalla crece, y cada bloque solo escribe lo que cambia respecto al anterior.

Las dos últimas consultan una preferencia que la persona ya declaró en su sistema. Atenderlas es parte de la accesibilidad.

Copiar los anchos de los dispositivos de moda produce una lista que envejece cada temporada y que nunca coincide con el momento en que el diseño deja de funcionar.

El método que aguanta: reducir la ventana poco a poco y anotar el ancho exacto en que algo se estropea —una línea de texto queda demasiado larga, dos columnas se estrechan hasta partir palabras, una imagen se vuelve una franja—. Ese ancho es el punto de quiebre, y sale del contenido.

Partir del documento HTML y la hoja de estilos de la sesión anterior, y resolver su acomodo completo. Entregar los dos archivos y tres capturas: a 360, 768 y 1280 px de ancho.

Requisitos

• La barra superior con Flexbox, con el logotipo separado de la navegación sin medidas fijas.
• La galería de proyectos con Grid, adaptable sin consultas de medios.
• La plantilla general con áreas nombradas, reordenada en pantalla estrecha.
• Al menos un punto de quiebre, justificado por escrito a partir del contenido.
• Todas las imágenes con proporción reservada.

Estructura, presentación y acomodo quedan resueltos. Lo que sigue es hacer que la página responda a quien la usa.

Fuentes de consulta

• MDN Web Docs · Guías de CSS: Flexbox y Grid. Mozilla, consulta 2026.
• Rachel Andrew, The New CSS Layout. A Book Apart, 2017.
• Ethan Marcotte, Responsive Web Design. 2.ª ed. A Book Apart, 2014.
• W3C · CSS Grid Layout Module Level 2. Especificación, 2025.