Patrones modernos de diseño CSS que todo desarrollador debería conocer
Patrones prácticos de maquetación con Grid, Flexbox, container queries y propiedades lógicas que resuelven el diseño responsivo sin JavaScript.
El diseño CSS ha cambiado radicalmente. Patrones que antes requerían librerías de JavaScript, trucos con floats o divs profundamente anidados ahora se logran con unas pocas propiedades de Grid o Flexbox. Aun así, muchos desarrolladores siguen recurriendo a soluciones complejas cuando existe una alternativa en CSS más simple y mantenible. Estos son los patrones que resuelven los layouts que construyes cada semana.
El layout de barra lateral responsiva
Una barra lateral que se colapsa en pantallas estrechas sin necesidad de media queries. Las funciones minmax y auto-fit de CSS Grid gestionan el comportamiento responsivo de forma intrínseca.
/* ❌ Fixed sidebar with media query breakpoint */
.layout {
display: flex;
}
.sidebar {
width: 300px;
flex-shrink: 0;
}
.main {
flex: 1;
}
@media (max-width: 768px) {
.layout {
flex-direction: column;
}
.sidebar {
width: 100%;
}
}
/* Problem: arbitrary breakpoint, doesn't respond to container *//* ✅ Intrinsic responsive sidebar */
.layout {
display: grid;
grid-template-columns: fit-content(300px) minmax(50%, 1fr);
gap: 1.5rem;
}
/* Sidebar takes content width up to 300px
Main content gets at least 50% of the container
When 50% < remaining space, columns stack naturally */
/* Even better with container queries */
.layout {
container-type: inline-size;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@container (min-inline-size: 700px) {
.layout {
grid-template-columns: fit-content(300px) 1fr;
}
}La versión con container queries responde al ancho propio del componente en lugar del viewport, lo que la hace verdaderamente reutilizable sin importar dónde se coloque.
La cuadrícula de tarjetas con relleno automático
Una cuadrícula de tarjetas que ajusta automáticamente el número de columnas según el espacio disponible. Sin media queries, sin JavaScript.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: 1.5rem;
}
/* auto-fill creates as many 280px+ columns as fit
min(280px, 100%) prevents overflow on narrow containers
Cards stretch equally to fill remaining space */// The HTML is dead simple
function CardGrid({ items }: { items: CardItem[] }) {
return (
<div className="card-grid">
{items.map(item => (
<Card key={item.id} {...item} />
))}
</div>
);
}
// Compare to the JavaScript approach:
// ❌ const columns = Math.floor(containerWidth / 280);
// ❌ style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
// Requires ResizeObserver, re-renders on resize, SSR mismatchLa función min() es la clave de esta innovación. Sin ella, una sola tarjeta en una pantalla estrecha intentaría medir 280px de ancho y se desbordaría. min(280px, 100%) garantiza que las tarjetas nunca superen el ancho de su contenedor.
El layout Holy Grail
Encabezado, pie de página, barra lateral y área de contenido principal, todo responsivo, con el contenido principal ocupando el espacio vertical restante.
.page {
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
}
.header {
grid-column: 1 / -1;
}
.body {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
gap: 1.5rem;
padding: 1.5rem;
}
.footer {
grid-column: 1 / -1;
}
/* Stack on narrow screens using container query */
.body {
container-type: inline-size;
}
@container (max-inline-size: 600px) {
.body {
grid-template-columns: 1fr;
}
}/* The sticky sidebar bonus */
.sidebar {
position: sticky;
top: 1rem;
align-self: start;
max-height: calc(100dvh - 2rem);
overflow-y: auto;
}
/* Sidebar scrolls independently and stays visible
while main content scrolls normally */Usar 100dvh en lugar de 100vh tiene en cuenta la interfaz del navegador móvil que modifica la altura del viewport.
Contenido centrado con elementos que rompen el ancho
Contenido de estilo blog con un ancho máximo legible, donde algunos elementos (imágenes, bloques de código) se extienden a todo el ancho de la pantalla.
.content {
--content-width: 65ch;
--breakout-width: 85ch;
--full-width: 100%;
display: grid;
grid-template-columns:
[full-start]
minmax(1rem, 1fr)
[breakout-start]
minmax(0, calc((var(--breakout-width) - var(--content-width)) / 2))
[content-start]
min(var(--content-width), 100% - 2rem)
[content-end]
minmax(0, calc((var(--breakout-width) - var(--content-width)) / 2))
[breakout-end]
minmax(1rem, 1fr)
[full-end];
}
.content > * {
grid-column: content;
}
.content > .breakout {
grid-column: breakout;
}
.content > .full-width {
grid-column: full;
}<article class="content">
<h2>Article Title</h2>
<p>Regular paragraph content stays within the readable width.</p>
<!-- This image breaks out wider -->
<img class="breakout" src="diagram.webp" alt="Architecture diagram" />
<p>More regular content.</p>
<!-- This spans the full viewport width -->
<pre class="full-width"><code>// Full-width code block</code></pre>
</article>Este patrón elimina la necesidad de márgenes negativos o posicionamiento absoluto para sacar elementos fuera de un contenedor centrado.
La pila flexible con propiedades lógicas
Una pila vertical que se adapta automáticamente tanto a diseños LTR como RTL mediante el uso de propiedades lógicas.
/* ❌ Physical properties break in RTL */
.stack > * + * {
margin-top: 1rem;
}
.card {
padding-left: 1.5rem;
border-left: 3px solid var(--accent);
text-align: left;
}
/* ✅ Logical properties work in any writing mode */
.stack > * + * {
margin-block-start: 1rem;
}
.card {
padding-inline-start: 1.5rem;
border-inline-start: 3px solid var(--accent);
text-align: start;
}/* A complete token-based spacing system with logical properties */
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
align-items: center;
}
.sidebar-layout {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
}
.sidebar-layout > :first-child {
flex-basis: 20rem;
flex-grow: 1;
}
.sidebar-layout > :last-child {
flex-basis: 0;
flex-grow: 999;
min-inline-size: 50%;
}
/* Sidebar wraps below main content when space is tight
No media queries — responds to available space */Componentes con container queries
Las container queries permiten que los componentes se adapten al tamaño de su contenedor en lugar del viewport. Esto los hace verdaderamente portables.
.product-card {
container-type: inline-size;
container-name: product;
}
.product-card__layout {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
/* Horizontal layout when card is wide enough */
@container product (min-inline-size: 400px) {
.product-card__layout {
grid-template-columns: 150px 1fr;
}
.product-card__image {
aspect-ratio: 1;
object-fit: cover;
}
}
/* Full featured layout in wide containers */
@container product (min-inline-size: 600px) {
.product-card__layout {
grid-template-columns: 200px 1fr auto;
}
.product-card__actions {
display: flex;
flex-direction: column;
justify-content: center;
}
}// Same component works in any width context
function ProductPage() {
return (
<main>
{/* Card adapts to narrow sidebar */}
<aside style={{ width: "300px" }}>
<ProductCard product={featured} />
</aside>
{/* Same card adapts to wide main area */}
<section>
<ProductCard product={featured} />
</section>
{/* Same card adapts to full-width hero */}
<div style={{ width: "100%" }}>
<ProductCard product={featured} />
</div>
</main>
);
}Puntos clave
El CSS moderno es lo bastante potente como para gestionar el comportamiento responsivo de forma intrínseca, sin media queries, mediciones en JavaScript ni utilidades de frameworks. Usa auto-fill de Grid junto con minmax para cuadrículas de tarjetas que se autoajustan. Usa container queries para componentes que respondan a su contexto en lugar del viewport. Adopta propiedades lógicas (block-start, inline-end) para que los layouts funcionen correctamente en cualquier dirección de escritura. Los mejores patrones de CSS son declarativos: describes lo que quieres, no cómo calcularlo. Deja que el navegador haga los cálculos. Escribe menos, mantén menos y entrega layouts que funcionen en cualquier tamaño de pantalla y sistema de escritura de forma predeterminada.
