Grid

Flexocss uses a 16-column grid system built on flexbox. Column widths are calculated automatically accounting for gaps, so layouts never break from spacing math.

Container

The .container centers the content and sets a max-width of 1420px. Add .fluid for a full-width container with no max-width limit.

HTML

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

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

Row

The .row creates a flex container with wrapping enabled. Like the container, it has a max-width of 1420px and centers itself.

HTML

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

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

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

.row — flex row with wrap, max-width 1420px, auto-centered.
.row.fluid — removes the max-width, takes the full available width.
.row.block — switches to column direction for stacked layouts.

Columns

Use .fl-box with .fl-{n} where n is a value from 1 to 16. All widths are gap-aware: column calculations subtract the appropriate fraction of the gap so the total always fits perfectly.

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>

Examples

fl-4

fl-6

fl-10

fl-16

Auto width

Use .fl-auto to make columns share the available space equally. This is useful when you don't need precise column control.

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

Apply gap classes on the .row to control spacing between columns. The pattern is .fl-{bp}-gap-{value} where value goes from 0 to 80 in steps of 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>

Gaps are responsive: use different values per breakpoint. Column widths automatically adjust to account for the gap, keeping the layout intact.

Gap comparison

gap 0

fl-4

gap 16

fl-4

gap 32

fl-4

Offset

Push a column to the right using .fl-offset-{n}. The offset is gap-aware, so it accounts for the row gap in its calculation.

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

Offsets are responsive too. Use .fl-{bp}-offset-{n} to change or reset the offset at different breakpoints.

HTML

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

Nesting

Place a .row inside an .fl-box to create nested grids. Each nested row gets its own 16-column context.

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

← Previous Getting Started

Next → Gap & Area