Wireframe
Back to docs

The CSS Grid Framework

Build responsive layouts
with flexocss

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula augue ac urna facilisis, vel condimentum enim rutrum. Sed tincidunt nisi vitae lorem pharetra posuere.

Get Started View Docs
Features

Everything you need, nothing you don’t

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor ut.

16-Column Grid

More granularity than traditional 12-column systems. Ut porta lorem at risus semper ornare, integer pellentesque venenatis massa.

Gap-Aware Columns

Column widths automatically account for the gap. Proin euismod enim nec arcu tincidunt, sit amet malesuada arcu dignissim.

6 Responsive Breakpoints

From small phones (sm) to ultrawide monitors (ut). Donec sed odio dui, cras justo odio dapibus ac facilisis in egestas.

How it works

Designed for real projects, built for speed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Donec nisl orci, egestas vel.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget tempor sit amet ante.

Learn more View on GitHub →
<div class="container">
  <div class="row fl-sm-gap-16">
    <div class="fl-box fl-sp-8">
    </div>
  </div>
</div>
Wireframe Mode

Debug your layout visually

Ut porta lorem at risus semper ornare. Integer pellentesque venenatis massa, a commodo augue commodo vitae. Donec dignissim elit purus, sit amet mattis eros volutpat quis.

Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.

Explore wireframe
Numbers

Numbers that matter

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget.

16

Grid columns

More granularity than traditional 12-column grid systems for precise layouts.

6

Breakpoints

From small phones to ultrawide monitors, every screen size is fully covered.

0

Dependencies

Pure CSS, no JavaScript required. Just include the file and start building.

Nesting levels

Rows inside boxes inside rows — create any complex layout without limits.

Ready to start building?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus.

Install via npm Read the docs