STACK TECH LAYOUT

Catálogo de Estructura: Grilla y Espaciado

Una colección de 50 patrones de diseño estructural. Desde columnas básicas hasta layouts complejos y escalas de ritmo vertical.

01. Sistemas de Columnas (Grid Columns)

Fundamentos de división horizontal.

#01. Columna Única (Mobile First)

Col 1

#02. Dos Columnas (50/50)

Col 1
Col 2

#03. Tres Columnas (Standard Web)

1
2
3

#04. Cuatro Columnas (Dashboard)

1
2
3
4

#05. Cinco Columnas (Gallery)

1
2
3
4
5

#06. Seis Columnas (Compact)

1
2
3
4
5
6

#07. El Estándar de 12 Columnas

1
2
3
4
5
6
7
8
9
10
11
12

#08. Asimétrico (Sidebar + Main)

Sidebar
Main Content

#09. Asimétrico Inverso (Main + Widget)

Main Content
Widget

#10. Holy Grail (Left, Center, Right)

Nav
Feed
Ads

02. Escala de Espaciado (Gaps)

Separación entre elementos usando la escala de 4px.

#11. Gap 1 (4px) - Ultra Compacto

#12. Gap 2 (8px) - Compacto

#13. Gap 4 (16px) - Estándar

#14. Gap 8 (32px) - Aireado

#15. Gap 12 (48px) - Sección

#16. Gap X (Solo Horizontal)

1
2
3
4
5
6

#17. Gap Y (Solo Vertical - Stack)

Item A
Item B
Item C

#18. Asimétrico (X Grande, Y Pequeño)

A
B
C
D

#19. Gaps Anidados

Sub
Sub
Padre

#20. Gap Zero (Flush Grid)

A
B
C

03. Espaciado Interno (Padding Scale)

El padding crea respiración dentro de los contenedores.

#21. p-1 (4px)
#22. p-2 (8px)
#23. p-4 (16px)
#24. p-8 (32px)
#25. p-12 (48px)

#26. Padding Y > X (Botones/Badges)

py-1 px-4

#27. Padding X > Y (Input style)

py-3 px-6

#28. Card Padding (Standard)

#29. Card Padding (Compacto)

#30. Hero Padding

HERO

04. Adaptabilidad y Span (31-40)

Cómo los elementos ocupan espacio y cambian según el viewport.

#31. Col-Span (Ocupar espacios horizontales)

1
span-3
span-2
2

#32. Row-Span (Ocupar altura)

row-span-2
1
2
3
4

#33. Offset (Col Start/End)

Start 2 / End 6
Start 1 / End 3
Start 5 / End 7

#34. Estilo "Bento Box"

Big Block
Wide
Small
Small
Footer Strip

#35. Responsive Steps (Redimensiona la ventana)

1
2
3
4
5
6

#36. Grid Auto Flow Dense (Rellena huecos)

1 (2 cols)
2 (3 cols - salta línea)
3 (Rellena hueco)

#37. Place Items Center

#38. Grid Auto Cols (Scroll horizontal)

Fijo 32
Fijo 48
Fijo 64
Fijo 32

#39. Orden Visual (CSS Order)

1 (Order 3)
2 (Order 2)
3 (Order 1)

#40. Aplicación: Card de Producto

Img

05. Patrones Avanzados (41-50)

Llevando el sistema al límite.

#41. Tablero de Ajedrez

#42. Estilo Mondrian

#43. Timeline (Grid Hack)

Evento 1
Evento 2

#44. Mosaico de Imágenes

#45. Layout Teclado (Desplazamientos)

Q
W
E
R
T
Y
U
I
O
P
A
S
D
F
G
H
J
K
L

#46. Superposición (Grid Area 1/1)

TEXTO ENCIMA

#47. Tabla de Precios

Basic
Pro
Ent
$10
$20
$50
✔️
✔️
✔️

#48. Footer Sitemap Grid

ProdAB
CompAB
LegalAB
SocialAB

#49. Grid Rotado

Center

#50. The Ultimate Grid (Responsive total)

XS:1
SM:2
MD:3
LG:4
XL:6
Flex