This is a simple demo of the gridlex Flexbox grid system

For more info see the gridlex website

Simple Grid

Just add a class of 'grid' to the parent element and a class of 'col' to each child and they will create automatically even columns 


      <div class="grid">
        <div class="col"> col </div>
        <div class="col"> col </div>
        <div class="col"> col </div>
      </div>
    

        selector { property: value; }
col
col
col

Precise Grid

Using a 12 col grid, set the width of each column by adding a class of 'col-*'


      <div class="grid">
        <div class="col-3">col-3</div>
        <div class="col-4">col-4</div>
        <div class="col-5">col-5</div>
      </div>
col-3
col-4
col-5

Equal height Grid

Whoohooo! Finally an easy way to create an equal height grid without setting a fixed height. If you switch to flexbox for anything, this will be it!

Just add a class of 'grid-equalHeight' to the parent container


      <div class="grid-equalHeight">
        <div class="col-3"> ... </div>
        <div class="col-4"> ... </div>
        <div class="col-5"> ... </div>
      </div>
Cred chia everyday carry, proident bitters church-key vaporware. Mustache godard chartreuse before they sold out.
Ethical iPhone deep v synth occupy, asymmetrical viral crucifix shabby chic activated charcoal 3 wolf moon seitan tumeric vinyl schlitz. Hexagon lyft mumblecore iPhone, pabst sartorial kogi whatever la croix microdosing retro blog cred helvetica keytar. Hoodie forage swag cold-pressed.
DIY tumblr drinking vinegar, before they sold out cardigan mustache tote bag blue bottle man bun ramps vexillologist artisan pickled kogi. Direct trade single-origin coffee PBR&B taxidermy, neutra hashtag poutine.

Want gutters?

For simple grids you can just add style to the col divs themselves, and since their width is automatically calculated your can adjust the margins without breaking the design... woohooo! If you want a background but need tohave variable width columns, the best way to do that is to nest a div inside each col. While it seems like slightly redundent html (and it is) it's the easiest and most reliable way to keep the grid working well on all browsers and devices. So just add a div inside and apply your styling to that.

DIY tumblr drinking vinegar, before they sold out cardigan mustache tote bag blue bottle man bun ramps vexillologist artisan pickled kogi.
DIY tumblr drinking vinegar, before they sold out cardigan mustache tote bag blue bottle man bun ramps vexillologist artisan pickled kogi.
DIY tumblr drinking vinegar, before they sold out cardigan mustache tote bag blue bottle man bun ramps vexillologist artisan pickled kogi.

Easy Responsive Headers

The quickest and easiest way to create a header -- just add a class of 'grid-middle' to the parent along with the relevant child classes (col or col-* depending on your design) and irrespective of height, they will vertically center. For example adding 'col_sm-12' says to have a column that's automatically sized on desktop, but on small devices to take up all 12 columns. 


    <div class="grid-middle-spaceBetween">
      <div class="col_sm-12">
        <h1> MY LOGO </h1>
      </div>
      <div class="col_sm-12">
          <nav>
            <a href="#"> Home </a>
            <a href="#"> About </a>
            <a href="#"> Services </a>
          </nav>
      </div>
    </div>

MY LOGO