Layouts — FDS

FDS resuelve el layout en tres niveles: el <section> como contenedor inteligente, .content-flex para posicionar contenido en una rejilla de nueve puntos y un set de grids proporcionales con auto-fill. Sin media queries en la mayoría de casos.

Secciones

Cada <section> es automáticamente un contenedor con padding fluido y max-width. El primer hijo directo recibe mx-auto, max-w-container y flex-col, así no hay que pensar en wrappers.

Estructura base

El patrón fundamental es section > div > div. La sección establece padding horizontal y vertical, el primer div centra el contenido y los hijos ocupan el ancho disponible.

<main>
  <section>
    <div>
      <h1 class="heading">Título</h1>
      <p class="text-large">Intro...</p>
    </div>
  </section>

  <section class="has-background bg-primary-50">
    <div>
      <h2 class="subheading">Sección con fondo</h2>
    </div>
  </section>
</main>

Modificadores de spacing

Las secciones detectan si son la primera o última, si tienen fondo o si están adyacentes a otra sección con fondo, y ajustan el padding solas. Los modificadores fuerzan comportamientos puntuales.

Clase	Efecto
`.has-background`	Padding vertical completo (`--ft-padding-content-y`) arriba y abajo. Para secciones con color o imagen de fondo.
`.half-top`	Reduce el padding superior al 50 %. Acerca al contenido anterior.
`.half-bottom`	Reduce el padding inferior al 50 %. Acerca al siguiente.

Block Bleed

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

<section>
  <div>
    <p>Contenido normal limitado por max-w-container.</p>
    <img class="block-bleed" src="hero.jpg" alt="">
    <p>Vuelve al ancho contenido.</p>
  </div>
</section>

Internamente usa width: 100vw con left: 50%; transform: translateX(-50%). Funciona dentro de la estructura section > div.

Content Flex — 9 puntos

.content-flex posiciona contenido en una de nueve casillas dentro de su contenedor. Útil para heroes con overlay de texto.

<div class="content-flex bottom-left">
  <h2 class="display-sm">Abajo a la izquierda</h2>
  <p>Subtítulo alineado coherentemente.</p>
</div>

Posiciones: top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-right.

Ver Content-flex para la referencia completa, ejemplos y variables relacionadas.

Grids proporcionales

Utilities @utility para grids con proporciones predefinidas. Usan spacing semántico vía gap-columns y cada celda emplea minmax(0, Xfr) para evitar overflow.

2 columnas

<div class="grid grid-cols-1-2"> <!-- 1fr 2fr -->
<div class="grid grid-cols-2-1"> <!-- 2fr 1fr -->

3 columnas

<div class="grid grid-cols-1-2-1"> <!-- centro pesado -->
<div class="grid grid-cols-2-1-1"> <!-- peso a la izquierda -->
<div class="grid grid-cols-1-1-2"> <!-- peso a la derecha -->
<div class="grid grid-cols-1-3">   <!-- sidebar + main -->
<div class="grid grid-cols-3-1">   <!-- main + sidebar -->

Referencia

Clase	Proporción
`.grid-cols-1-2` / `.grid-cols-2-1`	1fr + 2fr (y viceversa)
`.grid-cols-1-3` / `.grid-cols-3-1`	1fr + 3fr (y viceversa)
`.grid-cols-1-2-1`	1fr + 2fr + 1fr
`.grid-cols-2-1-1` / `.grid-cols-1-1-2`	Tres columnas con un lado pesado

Auto-fill / Auto-fit

Grids que se adaptan al ancho disponible. Defines un mínimo por celda y CSS Grid calcula cuántas columnas caben. Sin breakpoints.

<div class="grid grid-auto-fit-md">  <!-- min: token card-md -->
<div class="grid grid-auto-fill-sm">

Variante	Comportamiento
`auto-fill`	Mantiene columnas vacías invisibles. Las celdas no se estiran más allá del máximo. Ideal para grids de cards con anchos consistentes.
`auto-fit`	Colapsa columnas vacías y expande las celdas existentes para llenar todo el ancho. Ideal cuando hay pocas celdas.

Tamaños: xs, sm, md, lg, xl — alineados con los anchos de card-*.