Maquetación con Flexbox, Grid y Responsive

1. Cómo decide el navegador qué estilo aplicar

Es frecuente que dos reglas CSS digan cosas distintas del mismo elemento: una pone el título en azul y otra en rojo. Entender cómo resuelve el navegador esos conflictos es lo que separa escribir CSS a base de prueba y error de escribirlo con intención. El algoritmo se llama cascada y tiene en cuenta, por este orden, el origen y la importancia de la regla, su especificidad y, si empatan, cuál aparece la última.

La especificidad se compara columna a columna: una sola clase gana a cualquier número de elementos. Por eso las guías modernas recomiendan estilar casi todo con clases, que tienen una especificidad baja y uniforme, y evitar los identificadores y el !important: cada vez que uno de ellos gana una batalla, la siguiente regla necesitará algo todavía más fuerte, y la hoja de estilos se convierte en una carrera armamentística.

2. El modelo de caja y las unidades

Para el navegador, cada elemento es una caja formada por el contenido, el relleno (padding), el borde y el margen. Por defecto, width mide solo el contenido, así que una caja de 300px con 20px de relleno ocupa en realidad 340px. Casi todos los proyectos empiezan con la misma regla para que el ancho incluya relleno y borde, que es lo que uno espera:

1*, *::before, *::after { box-sizing: border-box; }

3. Flexbox: colocar en una dimensión

Flexbox coloca elementos en una fila o una columna y reparte entre ellos el espacio sobrante. Es la herramienta ideal para las piezas de una interfaz: una barra de navegación, los botones de un formulario, una tarjeta con su imagen y su texto. Todo gira en torno a dos ejes: el principal, que marca flex-direction, y el cruzado, perpendicular a él.

1.barra {
2  display: flex;
3  justify-content: space-between;   /* eje principal: logo a un lado, menú al otro */
4  align-items: center;              /* eje cruzado: centrados en vertical */
5  gap: 1rem;                        /* separación entre elementos */
6  flex-wrap: wrap;                  /* si no caben, a la línea siguiente */
7}
8
9.buscador { flex: 1; }              /* ocupa todo el espacio que sobre */

4. CSS Grid: colocar en dos dimensiones

Grid trabaja con filas y columnas a la vez, como una tabla invisible sobre la que colocas los elementos. Es la herramienta para la estructura de la página (cabecera, barra lateral, contenido, pie) y para cualquier colección de elementos en rejilla. La regla práctica: Flexbox para alinear piezas dentro de un componente, Grid para el esqueleto y las rejillas.

1.pagina {
2  display: grid;
3  grid-template-columns: 250px 1fr;
4  grid-template-areas:
5    "cabecera cabecera"
6    "lateral  contenido"
7    "pie      pie";
8  gap: 1.5rem;
9  min-height: 100dvh;
10}
11.pagina > header { grid-area: cabecera; }
12.pagina > aside  { grid-area: lateral; }
13
14/* Una rejilla que decide sola cuántas columnas caben (mínimo 220px cada una) */
15.productos {
16  display: grid;
17  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
18  gap: 1rem;
19}

La última regla es de las más útiles de CSS: repeat(auto-fill, minmax(220px, 1fr)) crea tantas columnas de al menos 220px como quepan y reparte el resto del espacio entre ellas. La rejilla se adapta a cualquier pantalla sin una sola media query.

(sin mensajes)

5. Diseño adaptable (responsive)

Más de la mitad de las visitas a una web llegan desde el móvil, y Google indexa la versión móvil de las páginas. Diseñar de forma adaptable significa que una misma página se reorganiza para verse bien en cualquier tamaño de pantalla. Descansa en cuatro ideas:

1. La etiqueta <meta name="viewport" content="width=device-width, initial-scale=1">, sin la cual el móvil simula una pantalla de escritorio y lo encoge todo.
2. Mobile first: los estilos base son para el móvil y las media queries con min-width añaden cambios para pantallas mayores. Es más fácil ampliar un diseño sencillo que recortar uno complejo.
3. Puntos de ruptura según el contenido, no según modelos de teléfono: añade una media query donde el diseño empiece a verse mal.
4. Medidas fluidas: porcentajes, fr, max-width: 100% en las imágenes y clamp() para textos que crecen con la pantalla.

1h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }   /* mínimo, ideal y máximo */
2img { max-width: 100%; height: auto; }
3
4.tarjeta { display: grid; gap: 1rem; }
5@media (min-width: 40rem) {
6  .tarjeta { grid-template-columns: 200px 1fr; }       /* imagen al lado del texto */
7}
8
9/* Container queries: el componente se adapta a su contenedor, no a la pantalla */
10.lateral { container-type: inline-size; }
11@container (min-width: 30rem) {
12  .tarjeta { grid-template-columns: 1fr 2fr; }
13}

6. Retos de maquetación

En estos retos editas el CSS. Las pruebas miden dónde queda cada elemento, y en los retos adaptables también comprueban cómo se ve la página a 375px (un móvil) y a 1000px.

Retos