Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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-

Releases

No releases published

Packages

No packages published