Separación mínima entre elementos internos.
.stack-xs
Stack
Stack organiza la separación vertical interna entre elementos de un mismo bloque y permite construir composiciones limpias, repetibles y consistentes.
Qué resuelve stack
El módulo stack controla el flujo vertical dentro de un bloque. Su objetivo es separar elementos internos de forma consistente sin depender de márgenes puntuales entre hijos.
Stack no crea layout horizontal ni reemplaza el spacing direccional. Resuelve una composición interna ordenada, clara y repetible.
Referencia del archivo
.stack {
display: flex;
flex-direction: column;
gap: var(--stack-gap, var(--space-3));
}
.stack-xs { --stack-gap: var(--space-1); }
.stack-sm { --stack-gap: var(--space-2); }
.stack-md { --stack-gap: var(--space-3); }
.stack-lg { --stack-gap: var(--space-5); }
.stack-xl { --stack-gap: var(--space-6); }Variantes del sistema
Separación pequeña para grupos compactos.
.stack-sm
Ritmo base del sistema.
.stack-md
Separación más abierta para bloques principales.
.stack-lg
Ritmo amplio para composiciones con más aire.
.stack-xl
Ejemplos de uso
Título del bloque
Este contenido usa stack para separar internamente cada elemento del bloque.
<div class="stack stack-md">
<p class="meta">Meta</p>
<h3 class="title">Título</h3>
<p>Contenido</p>
</div>Texto breve
Texto breve
<div class="stack stack-sm">
...
</div>Escalado responsive
Stack puede cambiar de ritmo conforme crece el viewport, permitiendo que un bloque sea más compacto en móvil y respire más en desktop.
<div class="stack stack-sm md:stack-md lg:stack-lg">
...
</div>- Base móvil: stack compacto o medio.
- Desktop: stack más amplio cuando el layout lo necesita.
- El flujo interno cambia sin alterar la estructura general.
Cuándo usar stack
Sí usar
- Dentro de cards.
- En bloques editoriales.
- En headers internos de módulos.
- En componentes con flujo vertical natural.
- Cuando quieres evitar márgenes entre hijos.
No usar
- Para separar secciones completas de página.
- Como sustituto de grid.
- Para resolver padding interno del contenedor.
- Cuando el bloque necesita control direccional puntual.
Stack vs section vs spacing
Flujo interno
Se usa dentro de un mismo bloque para organizar hijos verticalmente.
Ritmo macro
Se usa entre grandes bloques de página.
Ajuste puntual
Se usa cuando un elemento necesita margin o padding específico.
Qué sí y qué no va en stack
Qué sí debe contener
- Display flex vertical.
- Gap interno entre hijos.
- Variantes de ritmo vertical.
- Variantes responsive del stack.
Qué no debe contener
- Margin direccional.
- Grid horizontal.
- Padding del contenedor.
- Tipografía.
- Decoración del proyecto.
Siguiente paso
Continúa con spacing para revisar márgenes y padding puntuales del sistema.