15 Best Flexbox Grid Frameworks

Flexbox Grid FrameworksWhen it comes to a fully responsive website / app, one of the most important aspects of your design will be the grid. With the emergence of flexbox, creating a responsive grid system for your application has never been easier.

Flexbox aims to provide more efficient layouts by aligning and distributing space among items in a container.

So here are 15 Best Flexbox Grid Frameworks to create simple and intuitive layout system.

FlexGrid

It provides simpler and more flexible layout options in CSS. More specifically, it provides easy vertical alignment of content within a parent element, easy reordering of content across devices and screen resolutions with the help of media queries and easy CSS-only equal height columns for your grid-based layouts.

Flexbox Grid


Bulma

Bulma is an open source CSS framework based on Flexbox and built with Sass. It’s 100% responsive, fully modular, and available for free.

bulma


Gridlex

Gridlex is a simple flexbox grid system. There are three different ways to use it: the basic way where you add a class; the precise, cell-by-cell way; or the automatic, where you just tell it how many cells you want in the grid.

gridlex


Flexbox Grid

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

A grid system based on the flex display property.


Milligram

It is different than most because of its use of the CSS Flexible Box Layout Module standard. The advantage is the simplicity, and we know that a functional code is very important for maintainability and scalability. Simply add columns you want in a row, and they’ll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns.

miligram


Sharps

A dead-simple, bare bones responsive grid to help you get your layouts looking sharp quickly.

sharp


Grd

Flexible Box Layout Module and calc() as CSS unit value used in Grd are available on modern browsers.

grd


Akali

Grids divide horizontal space into units called “column”. Imagine your page divided into 12 columns, you could set your sidenav to take 4 columns and your content to take 8. Using Akali makes content appear to flow more naturally on your page and in other devices.

akali


Reflex

A lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills.

reflex


useful.ly

The goal was to start using flexbox with the lowest possible learning curve aka least about of classes necessary.

Flexbox-Based CSS Framework


Component

SUIT CSS components-grid. The grid makes use of flexbox and box-sizing to provide features that float-based layouts cannot.

suitcss


Lentus

Multi-purpose responsive grid system in pure CSS.

lentus


Kindling

A grid framework based on the flex display property.

kindling


flexgrid.css

It is a responsive, declarative grid system powered by flexbox. It allows you to generate finely tuned responsive layouts at a lightning pace. The declarative nature lets you determine what size a grid cell should be at a certain screen width.

flexgrid


Flexible.gs

Responsive grid system based on Flexbox and built with SCSS. Actually: an ultra light library for creating responsive websites. Fully customizable with SCSS. Reasonable alternative to complex frameworks.

Flexible grid system by Michowski

  • This post originally appeared on Bashooka.

You may also like...

Read previous post:
10 Most Prominent Emerging Tools for Web Developers

Over the past few years many new frontend technologies have leaked onto the market. The web design landscape has shifted...

Close