Gap & Area

Flexocss provides three complementary spacing utilities: gap controls the space between columns in a row, padding adds internal spacing to any element, and area applies vertical padding to sections. All three support responsive breakpoint prefixes.

Gap

Apply gap classes to a .row to control the spacing between columns. The pattern is .fl-{bp}-gap-{value}. Column widths are gap-aware: they automatically subtract the correct fraction of the gap so the layout never breaks.

HTML

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

Default values: 0 to 80px in steps of 8. Configurable via $gapStep and $gapNumber.

Gap comparison

gap 0

fl-4

gap 16

fl-4

gap 32

fl-4

Use different gap values per breakpoint for tighter layouts on mobile and more breathing room on desktop.

Padding

Add internal padding to any element. The pattern is .fl-{bp}-padding-{value}. Unlike gap, padding works on any element — not just rows.

HTML

<div class="fl-box fl-sm-padding-16 fl-lg-padding-24 fl-sp-padding-32">
  ...
</div>

Default values: 0 to 96px in steps of 8. Configurable via $paddingStep and $paddingNumber.

Padding comparison

padding-0

fl-sm-padding-0

padding-16

fl-sm-padding-16

padding-32

fl-sm-padding-32

padding-48

fl-sm-padding-48

Class	CSS property
`.fl-{bp}-padding-0`	padding: 0
`.fl-{bp}-padding-8`	padding: 8px
`.fl-{bp}-padding-16`	padding: 16px
`.fl-{bp}-padding-24`	padding: 24px
`.fl-{bp}-padding-32`	padding: 32px
`...`	up to 96px

Area

Area classes apply vertical padding (top and bottom) to sections. Use them on wrapper elements like <section> to create consistent vertical rhythm across your page. The pattern is .fl-{bp}-area-{value}.

HTML

<section class="fl-sm-area-32 fl-lg-area-48 fl-sp-area-64 fl-mg-area-96">
  <div class="container">
    <div class="row">
      ...
    </div>
  </div>
</section>

Default values: 0 to 160px in steps of 16. Configurable via $gapStepArea and $gapNumberArea.

Area comparison

area-0

area-32

area-64

area-96

Class	CSS property
`.fl-{bp}-area-0`	padding-top: 0; padding-bottom: 0
`.fl-{bp}-area-16`	padding-top: 16px; padding-bottom: 16px
`.fl-{bp}-area-32`	padding-top: 32px; padding-bottom: 32px
`.fl-{bp}-area-48`	padding-top: 48px; padding-bottom: 48px
`.fl-{bp}-area-64`	padding-top: 64px; padding-bottom: 64px
`...`	up to 160px

Combine area classes across breakpoints to create sections that breathe more on larger screens: fl-sm-area-32 fl-lg-area-64 fl-sp-area-96.

← Previous Grid

Next → Breakpoints