Framework Documentation

Proportions

Proportions permite construir relaciones estructurales entre columnas, útiles para layouts editoriales, dashboards y composiciones con jerarquía visual.

Overview

Qué resuelven las proporciones

Mientras que column count define cuántas columnas habrá, proportions define cómo se reparten visualmente.

Este sistema permite construir relaciones como 2fr 1fr, 1fr 2fr o 3fr 1fr, útiles cuando una parte del layout necesita mayor jerarquía que otra.

Mechanics

Cómo funciona técnicamente

.grid {
  display: grid;
  grid-template-columns: var(
    --grid-template,
    repeat(var(--cols, 1), 1fr)
  );
  gap: var(--gap, var(--space-3));
}

.cols-2-1 {
  --grid-template: 2fr 1fr;
}

.cols-1-2 {
  --grid-template: 1fr 2fr;
}

Cuando una clase de proporción define --grid-template, esa relación reemplaza el uso simple de --cols y construye una distribución más específica.

Comparison

Cantidad vs proporción

Column Count

Distribución uniforme

Usa la misma fracción para todas las columnas.

<div class="grid cols-2 gap-md">
  ...
</div>

Resultado: 1fr 1fr

Proportions

Distribución jerárquica

Da más espacio a una parte del layout que a otra.

<div class="grid cols-2-1 gap-md">
  ...
</div>

Resultado: 2fr 1fr

Available Relations

Relaciones disponibles

Base

Cols 1-1

Relación equilibrada entre dos columnas.

.cols-1-1 {
  --grid-template: 1fr 1fr;
}

Base

Cols 2-1

Una columna principal y una secundaria.

.cols-2-1 {
  --grid-template: 2fr 1fr;
}

Base

Cols 1-2

Una columna secundaria y una principal.

.cols-1-2 {
  --grid-template: 1fr 2fr;
}

MD

Cols 3-1

Relación editorial o de sidebar fuerte.

.md:cols-3-1 {
  --grid-template: 3fr 1fr;
}

LG

Cols 4-1

Relación amplia para contenido principal dominante.

.lg:cols-4-1 {
  --grid-template: 4fr 1fr;
}

LG

Cols 2-1-1

Tres columnas con una principal y dos secundarias.

.lg:cols-2-1-1 {
  --grid-template: 2fr 1fr 1fr;
}

Examples

Ejemplos visuales

2-1

Área principal

<div class="grid cols-1 lg:cols-2-1 gap-md">
  <article>Área principal</article>
  <aside>Sidebar</aside>
</div>

1-2

Área principal

<div class="grid cols-1 lg:cols-1-2 gap-md">
  <aside>Sidebar</aside>
  <article>Área principal</article>
</div>

2-1-1

Contenido principal

Secundario 1

Secundario 2

<div class="grid cols-1 lg:cols-2-1-1 gap-md">
  <article>Contenido principal</article>
  <div>Secundario 1</div>
  <div>Secundario 2</div>
</div>

Usage

Cuándo usar proportions

Sí usar

Cuando una columna necesita jerarquía superior.
En layouts editoriales con sidebar.
En dashboards con panel principal dominante.
Cuando el layout no debe sentirse uniforme.

No usar

Cuando todas las columnas tienen el mismo peso.
En grids repetitivos de cards iguales.
Cuando el bloque solo necesita conteo simple.
Si la proporción complica innecesariamente la lectura.

Responsive

Escalado responsive

Las proporciones suelen activarse en breakpoints medios o grandes, mientras que la base móvil permanece generalmente en una sola columna.

<div class="grid cols-1 md:cols-2-1 gap-md">
  ...
</div>

Base móvil: una sola columna.
MD o LG: se activa la relación proporcional.
La lectura se mantiene simple en pantallas pequeñas.

Boundaries

Qué sí y qué no va en proportions

Qué sí debe contener

Relaciones de columnas.
Templates con fr.
Versiones responsive de esas relaciones.
Configuraciones de tres columnas jerárquicas.

Qué no debe contener

Conteo simple de columnas.
Gap helpers.
Containers.
Spacing o align.
Estilos visuales del proyecto.

Siguiente paso

Continúa con sections para empezar a revisar el ritmo vertical macro del sistema.

Volver a grid Ir a sections