CSS3 responsive con Flexbox y Grid: guía práctica

TL;DR Escribe primero los estilos para móvil y amplía con min-width. Usa Flexbox para alinear elementos en una dirección (barras, botones) y Grid para maquetar en dos dimensiones (tarjetas, layouts). Con repeat(auto-fit, minmax()) muchas veces ni necesitas media queries.

Hoy una gran parte de las visitas a cualquier sitio llega desde el móvil, así que un sitio que solo se ve bien en el monitor del escritorio está incompleto. En el libro Programación Full-Stack el capítulo de CSS3 se centra justamente en esto: construir interfaces que se adapten a cualquier pantalla sin frameworks ni trucos frágiles.

Mobile first: el punto de partida

“Mobile first” significa escribir los estilos base para pantallas pequeñas y añadir reglas a medida que hay más espacio. Es más sencillo agregar columnas que quitarlas, y el CSS resultante es más corto.

/* Base: una columna, pensada para móvil */
.contenedor {
    padding: 16px;
}

/* A partir de 768px (tablet) */
@media (min-width: 768px) {
    .contenedor {
        padding: 32px;
    }
}

/* A partir de 1100px (escritorio) */
@media (min-width: 1100px) {
    .contenedor {
        max-width: 1100px;
        margin: 0 auto;
    }
}

Recuerda la etiqueta <meta name="viewport" content="width=device-width, initial-scale=1"> en el HTML. Sin ella, el móvil simula una pantalla de escritorio y tus media queries no se activan.

Flexbox: alinear en una dimensión

Flexbox reparte el espacio entre elementos en una fila o en una columna. Es ideal para barras de navegación, grupos de botones o centrar algo vertical y horizontalmente.

.navbar {
    display: flex;
    justify-content: space-between; /* eje principal: extremos */
    align-items: center;            /* eje cruzado: centrado vertical */
    gap: 16px;                      /* espacio entre hijos */
    flex-wrap: wrap;                /* si no entra, baja de línea */
}

/* Centrar cualquier cosa, el clásico */
.centrado {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Las propiedades que más vas a usar en los hijos son flex: 1 (que ocupe el espacio sobrante), flex-shrink: 0 (que no se encoja, útil para iconos) y order (cambiar el orden visual sin tocar el HTML).

CSS Grid: maquetar en dos dimensiones

Grid controla filas y columnas a la vez. Es la herramienta para cuadrículas de tarjetas y para el layout general de la página.

La cuadrícula responsive sin media queries

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

Esta línea dice: “crea tantas columnas como entren, cada una de al menos 260px, y reparte el sobrante”. En el móvil verás una columna; en una tablet, dos; en el escritorio, tres o cuatro. Es un patrón ideal para el catálogo de una tienda online, como la del proyecto final del libro.

Un layout de página con áreas

.pagina {
    display: grid;
    grid-template-areas:
        "header"
        "main"
        "aside"
        "footer";
    gap: 24px;
}

@media (min-width: 900px) {
    .pagina {
        grid-template-columns: 1fr 300px;
        grid-template-areas:
            "header header"
            "main   aside"
            "footer footer";
    }
}

header { grid-area: header; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

Con grid-template-areas el CSS casi dibuja la página. Para reorganizar el diseño en otro tamaño de pantalla solo cambias el “mapa”, no el HTML.

¿Flexbox o Grid?

Situación	Elige
Barra de navegación, fila de botones, centrar un elemento	Flexbox
Cuadrícula de tarjetas o galería	Grid
Layout general: cabecera, contenido, barra lateral, pie	Grid
El tamaño depende del contenido de cada elemento	Flexbox
Quieres que los elementos se alineen en filas y columnas exactas	Grid

No compiten: lo normal es usar Grid para la estructura y Flexbox dentro de cada bloque.

Imágenes y tipografía fluidas

/* Las imágenes nunca desbordan su contenedor */
img {
    max-width: 100%;
    height: auto;
}

/* Título que crece con la pantalla, entre 1.8rem y 3rem */
h1 {
    font-size: clamp(1.8rem, 5vw, 3rem);
}

clamp(mínimo, preferido, máximo) evita escribir una media query para cada tamaño de fuente. Y usa rem para tamaños de texto: respeta la configuración de accesibilidad del usuario.

Errores comunes

Anchos fijos en píxeles (width: 960px): usa max-width para que el elemento pueda encogerse.
Scroll horizontal en el móvil: casi siempre es un elemento con ancho fijo, una imagen sin max-width o un texto largo sin cortar. Busca al culpable con las DevTools.
Demasiados breakpoints: decide los puntos de corte según tu contenido, no según modelos de teléfono concretos.
Probar solo en el navegador del escritorio: el modo responsive de las DevTools ayuda, pero revisa también en un móvil real.

Para profundizar, las guías de Flexbox y CSS Grid de MDN son la referencia más completa en español.

Aplica esto en proyectos reales con el libro Programación Full-Stack

El capítulo 3 del libro está dedicado a estilos y diseño responsivo, y después lo aplicas en tres proyectos reales: un blog, un sistema de usuarios y una tienda online.

Comprar en Amazon