Durante varios proyectos construí la vista de escritorio y luego intenté comprimirla. En 320 píxeles esa estrategia revelaba decisiones que nunca habían sido flexibles: títulos enormes, controles sin prioridad y tarjetas con demasiada información.
Qué reviso antes de agregar breakpoints
- Que el contenido defina la altura de los componentes.
- Que ningún botón dependa de un icono ambiguo.
- Que las palabras largas puedan envolverse.
- Que el orden visual coincida con el documento.
cssarchivo local
.article-grid {
display: grid;
grid-template-columns: repeat(
auto-fit, minmax(min(100%, 18rem), 1fr)
);
gap: clamp(1rem, 3vw, 2rem);
}