Layouts — FDS Docs

Secciones

Cada <section> es automáticamente un contenedor con padding y max-width. El primer hijo directo recibe mx-auto, max-w-container y flex-col. No necesitas pensar en el espaciado entre secciones — el sistema lo maneja por ti.

Estructura base

El patrón fundamental es section > div > div. La sección establece el padding horizontal y vertical, el primer div centra el contenido y limita el ancho, y los divs internos ocupan el 100% del ancho disponible.

HTML

<section>
  <div>  <!-- auto: mx-auto max-w-container flex-col gap-content -->
    <div>  <!-- auto: w-full -->
      <h2>Titulo de la seccion</h2>
      <p>Contenido de la seccion...</p>
    </div>
  </div>
</section>

Spacing inteligente: Las secciones detectan automáticamente si son la primera o última del contenido, si tienen fondo (.has-background) o si están adyacentes a otra sección con fondo, y ajustan su padding en consecuencia. No necesitas clases de spacing manuales en la mayoría de los casos.

Modificadores de spacing

Cuando necesitas control adicional sobre el padding vertical, estas clases modifican el comportamiento por defecto:

.has-background — Aplica padding vertical completo (--ft-padding-content-y) arriba y abajo. Usalo cuando la sección tiene color de fondo o imagen.
.half-top — Reduce el padding superior al 50%. Ideal para acercar la sección al contenido anterior.
.half-bottom — Reduce el padding inferior al 50%. Ideal para acercar la sección al contenido siguiente.

HTML

<!-- Seccion con fondo — padding completo automatico -->
<section class="has-background bg-primary-900">
  <div>
    <div>...</div>
  </div>
</section>

<!-- Seccion con mitad de padding superior -->
<section class="half-top">
  <div>
    <div>...</div>
  </div>
</section>

<!-- Seccion con mitad de padding inferior -->
<section class="half-bottom">
  <div>
    <div>...</div>
  </div>
</section>

Block Bleed

La clase .block-bleed rompe el contenedor y se extiende al ancho completo del viewport. Útil para imágenes o fondos que deben ser full-width dentro de una sección contenida.

HTML

<section>
  <div>
    <div>
      <p>Contenido normal dentro del contenedor</p>
    </div>

    <!-- Rompe el contenedor y ocupa 100vw -->
    <div class="block-bleed">
      <img src="hero.jpg" alt="Full width image">
    </div>

    <div>
      <p>Mas contenido dentro del contenedor</p>
    </div>
  </div>
</section>

Nota: .block-bleed usa width: 100vw con un truco de left: 50%; transform: translateX(-50%). Funciona correctamente dentro de la estructura section > div.

Referencia de clases de sección

Clase	Efecto
.has-background	Padding vertical completo (arriba y abajo)
.half-top	Padding superior reducido al 50%
.half-bottom	Padding inferior reducido al 50%
.block-bleed	Rompe contenedor, ocupa 100% viewport width

Content Flex — 9 Puntos

Posiciona contenido en cualquiera de los 9 puntos de una caja usando .content-flex. Por defecto se centra vertical y horizontalmente. Además de posicionar, ajusta automáticamente text-align y margin del contenido.

Demo visual

Cada caja muestra una posición diferente del contenido:

top-left

top

top-right

left

center

right

bottom-left

bottom

bottom-right

Clases de posición

HTML

<!-- Centro (default) -->
<div class="content-flex">...</div>

<!-- 9 posiciones explicitas -->
<div class="content-flex top-left">...</div>
<div class="content-flex top">...</div>
<div class="content-flex top-right">...</div>

<div class="content-flex left">...</div>
<div class="content-flex center">...</div>
<div class="content-flex right">...</div>

<div class="content-flex bottom-left">...</div>
<div class="content-flex bottom">...</div>
<div class="content-flex bottom-right">...</div>

Como funciona internamente

.content-flex usa display: flex con flex-direction: column. Cada posición combina justify-content (eje vertical) con align-items (eje horizontal), y ajusta text-align y margin para que el texto y los elementos internos se alineen coherentemente.

Clase	justify-content	align-items	text-align
.top-left	flex-start	flex-start	left
.top	flex-start	center	center
.top-right	flex-start	flex-end	right
.left	center	flex-start	left
.center	center	center	center
.right	center	flex-end	right
.bottom-left	flex-end	flex-start	left
.bottom	flex-end	center	center
.bottom-right	flex-end	flex-end	right

Grids Proporcionales

Clases @utility para grids con proporciones predefinidas. Usan spacing semántico por defecto vía gap-columns. Cada celda usa minmax(0, Xfr) para evitar overflow.

2 Columns

Grids de dos columnas con proporciones asimétricas:

grid-cols-1-2 (1fr + 2fr)

1fr

2fr

grid-cols-2-1 (2fr + 1fr)

2fr

1fr

HTML

<div class="grid grid-cols-1-2 gap-columns">
  <div>Sidebar (1fr)</div>
  <div>Content (2fr)</div>
</div>

<div class="grid grid-cols-2-1 gap-columns">
  <div>Content (2fr)</div>
  <div>Sidebar (1fr)</div>
</div>

3 Columns

Grids de tres columnas con distintas distribuciones de peso:

grid-cols-1-2-1 (1fr + 2fr + 1fr)

1fr

2fr

1fr

grid-cols-2-1-1 (2fr + 1fr + 1fr)

2fr

1fr

grid-cols-1-1-2 (1fr + 1fr + 2fr)

1fr

2fr

grid-cols-1-3 (1fr + 3fr) & grid-cols-3-1 (3fr + 1fr)

1fr

3fr

1fr

HTML

<!-- Contenido centrado con sidebars -->
<div class="grid grid-cols-1-2-1 gap-columns">
  <div>Side</div>
  <div>Main</div>
  <div>Side</div>
</div>

<!-- Contenido principal a la izquierda -->
<div class="grid grid-cols-2-1-1 gap-columns">
  <div>Main</div>
  <div>Col</div>
  <div>Col</div>
</div>

<!-- Sidebar estrecho + contenido ancho -->
<div class="grid grid-cols-1-3 gap-columns">
  <div>Nav</div>
  <div>Content</div>
</div>

Referencia completa de grids

Clase	Columnas	Proporciones
grid-cols-1-2	2	1fr 2fr
grid-cols-2-1	2	2fr 1fr
grid-cols-1-3	2	1fr 3fr
grid-cols-3-1	2	3fr 1fr
grid-cols-1-4	2	1fr 4fr
grid-cols-4-1	2	4fr 1fr
grid-cols-2-3	2	2fr 3fr
grid-cols-3-2	2	3fr 2fr
grid-cols-1-2-1	3	1fr 2fr 1fr
grid-cols-2-1-1	3	2fr 1fr 1fr
grid-cols-1-1-2	3	1fr 1fr 2fr
grid-cols-1-3-1	3	1fr 3fr 1fr
grid-cols-3-1-1	3	3fr 1fr 1fr
grid-cols-1-1-3	3	1fr 1fr 3fr
grid-cols-2-1-2	3	2fr 1fr 2fr
grid-cols-1-2-2	3	1fr 2fr 2fr
grid-cols-2-2-1	3	2fr 2fr 1fr
grid-cols-1-4-1	3	1fr 4fr 1fr
grid-cols-4-1-1	3	4fr 1fr 1fr
grid-cols-1-1-4	3	1fr 1fr 4fr
grid-cols-1-3-2	3	1fr 3fr 2fr
grid-cols-2-3-1	3	2fr 3fr 1fr
grid-cols-1-2-3	3	1fr 2fr 3fr
grid-cols-2-1-3	3	2fr 1fr 3fr
grid-cols-3-2-1	3	3fr 2fr 1fr
grid-cols-3-1-2	3	3fr 1fr 2fr

Auto-fill / Auto-fit

Grids que se adaptan automáticamente al ancho disponible. Definen un ancho mínimo por celda y dejan que CSS Grid calcule cuántas columnas caben. No necesitas media queries ni breakpoints.

Demo: auto-fill

Card 1

Card 2

Card 3

Card 4

Card 5

HTML

<!-- auto-fill: mantiene columnas vacias si sobra espacio -->
<div class="grid grid-auto-fill-xs gap-columns">...</div>  <!-- min 12rem -->
<div class="grid grid-auto-fill-sm gap-columns">...</div>  <!-- min 14rem -->
<div class="grid grid-auto-fill-md gap-columns">...</div>  <!-- min 18rem -->
<div class="grid grid-auto-fill-lg gap-columns">...</div>  <!-- min 24rem -->
<div class="grid grid-auto-fill-xl gap-columns">...</div>  <!-- min 36rem -->

<!-- auto-fit: expande celdas para llenar el espacio -->
<div class="grid grid-auto-fit-xs gap-columns">...</div>  <!-- min 12rem -->
<div class="grid grid-auto-fit-sm gap-columns">...</div>  <!-- min 14rem -->
<div class="grid grid-auto-fit-md gap-columns">...</div>  <!-- min 18rem -->
<div class="grid grid-auto-fit-lg gap-columns">...</div>  <!-- min 24rem -->
<div class="grid grid-auto-fit-xl gap-columns">...</div>  <!-- min 36rem -->

auto-fill vs auto-fit

La diferencia se nota cuando hay pocas celdas y mucho espacio disponible:

auto-fill — Mantiene columnas vacías invisibles. Las celdas respetan su ancho máximo y no se estiran más allá de 1fr. Ideal para grids de cards donde quieres consistencia de ancho.
auto-fit — Colapsa las columnas vacías y expande las celdas existentes para llenar todo el espacio. Ideal cuando tienes pocas celdas y quieres que ocupen todo el ancho.

Referencia de tamaños

Sufijo	Variable	Min width	Pixeles
xs	--ft-card-xs	12rem	192px
sm	--ft-card-sm	14rem	224px
md	--ft-card-md	18rem	288px
lg	--ft-card-lg	24rem	384px
xl	--ft-card-xl	36rem	576px

Tip: Cada tamaño usa min(var(--ft-card-*), 100%) para que en viewports pequeños las celdas colapsen a una sola columna automáticamente sin necesidad de media queries.