Skip to content
A CSS3 flex box based grid
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
README.md
demo.html
gulpfile.js
package.json

README.md

Flexgrid

A super lightweight CSS3 flex box based grid

Demo

Features

  • CSS Only
  • Super Lightweight (Only 3KB)
  • Rows will size to the same height

Browser compatiblity

All modern web browsers, IE9 and later are supported. For more details check Can I use.com

Usage

Basic

<div class="flexgrid">
	<div class="flex-xs-1">
		<div class="item-content">XS 1</div>
	</div>
	<div class="flex-xs-2">
		<div class="item-content">XS 2</div>
	</div>
	<div class="flex-xs-3">
		<div class="item-content">XS 3</div>
	</div>
	<div class="flex-xs-4">
		<div class="item-content">XS 4</div>
	</div>
	<div class="flex-xs-2">
		<div class="item-content">XS 2</div>
	</div>
</div>

Offset

<div class="flexgrid">
	<div class="flex-xs-6 flex-xs-offset-6">
		<div class="item-content">XS 1</div>
	</div>
	<div class="flex-xs-5 flex-xs-offset-7">
		<div class="item-content">XS 1</div>
	</div>
	<div class="flex-xs-4 flex-xs-offset-8">
		<div class="item-content">XS 1</div>
	</div>
</div>

Documentation

Breakpoints

Flexgrid is using the same Breakpoints as Boostrap 3

Class Size
flex-xs- > 768px
flex-sm- < 768px
flex-md- < 992px
flex-lg- < 1200px

Offset

The offset works the same way than the grid itself flex-xs-offset-

You can’t perform that action at this time.