Grid

Flexocss usa un sistema de grilla de 16 columnas basado en flexbox. Los anchos de las columnas se calculan automáticamente teniendo en cuenta los gaps, así los layouts nunca se rompen por cálculos de espaciado.

Container

El .container centra el contenido y establece un ancho máximo de 1420px. Agrega .fluid para un contenedor de ancho completo sin límites.

HTML

<!-- Centered, max-width 1420px -->
<div class="container">...</div>

<!-- Full width -->
<div class="container fluid">...</div>

Row

La .row crea un contenedor flex con wrapping activado. Como el container, tiene un ancho máximo de 1420px y se centra automáticamente.

HTML

<div class="row">...</div>

<div class="row fluid">...</div>

<div class="row block">...</div>

.row — fila flex con wrap, max-width 1420px, centrada automáticamente.
.row.fluid — elimina el max-width, toma todo el ancho disponible.
.row.block — cambia a dirección columna para layouts apilados.

Columnas

Usa .fl-box con .fl-{n} donde n es un valor de 1 a 16. Todos los anchos son gap-aware: los cálculos de las columnas restan la fracción apropiada del gap para que el total siempre encaje perfectamente.

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-4">4/16</div>
  <div class="fl-box fl-4">4/16</div>
  <div class="fl-box fl-4">4/16</div>
  <div class="fl-box fl-4">4/16</div>
</div>

Ejemplos

fl-4

fl-6

fl-10

fl-16

Ancho automático

Usa .fl-auto para que las columnas compartan el espacio disponible equitativamente. Útil cuando no necesitas control preciso de las columnas.

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-auto">Equal</div>
  <div class="fl-box fl-auto">Equal</div>
  <div class="fl-box fl-auto">Equal</div>
</div>

fl-auto

Gap

Aplica las clases gap en la .row para controlar el espaciado entre columnas. El patrón es .fl-{bp}-gap-{valor} donde el valor va de 0 a 80 en pasos de 8.

HTML

<div class="row fluid fl-sm-gap-16 fl-lg-gap-24 fl-sp-gap-32">
  <div class="fl-box fl-8">...</div>
  <div class="fl-box fl-8">...</div>
</div>

Los gaps son responsive: usa valores diferentes por breakpoint. Los anchos de las columnas se ajustan automáticamente al gap, manteniendo el layout intacto.

Comparación de gaps

gap 0

fl-4

gap 16

fl-4

gap 32

fl-4

Offset

Empuja una columna hacia la derecha usando .fl-offset-{n}. El offset es gap-aware, por lo que tiene en cuenta el gap de la fila en su cálculo.

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-8 fl-offset-4">Offset by 4</div>
  <div class="fl-box fl-4">No offset</div>
</div>

fl-8 fl-offset-4

fl-4

Los offsets también son responsive. Usa .fl-{bp}-offset-{n} para cambiar o resetear el offset en diferentes breakpoints.

HTML

<div class="fl-box fl-12 fl-offset-2 fl-lg-offset-0">
  Offset on mobile, no offset on tablet+
</div>

Anidamiento

Coloca una .row dentro de un .fl-box para crear grillas anidadas. Cada fila anidada obtiene su propio contexto de 16 columnas.

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-10">
    <div class="row fluid fl-sm-gap-8">
      <div class="fl-box fl-8">Nested 8/16</div>
      <div class="fl-box fl-8">Nested 8/16</div>
    </div>
  </div>
  <div class="fl-box fl-6">6/16</div>
</div>

Nested 8/16

6/16

← Anterior Empezar

Siguiente → Gap & Area