Flexbox Grid

Forked from original project: kristoferjoseph/flexboxgrid - flexboxgrid.com

Grid based on the flex display property.

Usage

The only difference between the original one and this fork is the implementation of hidden-XX class.

Example:

<div class="row">
    <div class="col-xs-12 col-md-4 col-lg-6">
        <p>This one is always visible</p>
    </div>
    <div class="col-xs-12 col-md-4 hidden-lg">
        <p>This one is hidden on large devices</p>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-6">
        <p>This one is always visible</p>
    </div>
</div>

All hidden classes:

• hidden-xs : Hidden on extra-small devices
• hidden-sm : Hidden on small devices
• hidden-md : Hidden on medium devices
• hidden-lg : Hidden on large devices

Install

npm

npm i flexboxgrid --save

bower

bower install flexboxgrid

cdn

CDNJS

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >

css

• Development
• Production

Add the flexboxgrid.css development or flexboxgrid.min.css production to your html page.

<link rel="stylesheet" href="css/flexboxgrid.min.css" type="text/css">

Inspiration

• topcoat-grid
• flexbox-grid by @zeMicro
• ptb2.me/flexgrid
• codepen.io/marcolago/pen/lqGFb
• philipwalton.github.io/solved-by-flexbox/demos/grids
• davidwalsh.name/stylus-grid