Dat.grid

A css and js Fluid / Solid / Responsive grid system.

Entirely fluid row:

Span1

Span1

Span3

Span2

Span1

Span1

Span1

Mixed row:

Span1 fixed

Span1 liquid

Span3 liquid

Span2 fixed

Span1 liquid

Span1 fixed

Span1 fixed

Entirely fixed row:

Span1

Span1

Span3

Span2

Span1

Span1

Span1

How to - entirely liquid grid

  • A set of rows must be inside a div with class "wrapper"
  • You can place as many rows as you want in a wrapper
  • The first column needs the class "first"
  • The last column needs the class "last" ('you don't say..')
  • Each column needs the class "liquid"
  • Each column needs the class spanX (where X is the width of the column; ex: span1, span2, [...], span10)
  • The sum of all the widths needs to be 10
  • Each column need the attribute "data-span" and it's value must be the same as the span
  • After the row's div closing tag you need an empty div with class "clear"

<div class="wrapper"> <div class="row"> <div class="span1 liquid first" data-span="1"><p>Span1</p></div> <div class="span1 liquid" data-span="1"><p>Span1</p></div> <div class="span3 liquid" data-span="3"><p>Span3</p></div> <div class="span2 liquid" data-span="2"><p>Span2</p></div> <div class="span1 liquid" data-span="1"><p>Span1</p></div> <div class="span1 liquid" data-span="1"><p>Span1</p></div> <div class="span1 liquid last" data-span="1"><p>Span1</p></div> </div> <div class="clear"></div> </div>

How to - Mixed grid

The same rules as above apply, except:

  • Columns which are not fluid don't need the class "liquid"
  • Columns which are not fluid don't need the "data-span" attribute

<div class="wrapper"> <div class="row"> <div class="span1 first" data-span="1"><p>Span1</p></div> <div class="span1 liquid" data-span="1"><p>Span1</p></div> <div class="span3 liquid " data-span="3"><p>Span3</p></div> <div class="span2" data-span="2"><p>Span2</p></div> <div class="span1 liquid" data-span="1"><p>Span1</p></div> <div class="span1 " data-span="1"><p>Span1</p></div> <div class="span1 last" data-span="1"><p>Span1</p></div> </div> <div class="clear"></div> </div>

How to - Entirely fixed grid

The same rules as above apply, except:

  • The wrapper needs the class "fixed"
  • No div needs the "data-span" attribute

<div class="wrapper fixed"> <div class="row"> <div class="span1 first"><p>Span1</p></div> <div class="span1"><p>Span1</p></div> <div class="span3"><p>Span3</p></div> <div class="span2"><p>Span2</p></div> <div class="span1"><p>Span1</p></div> <div class="span1"><p>Span1</p></div> <div class="span1 last"><p>Span1</p></div> </div> <div class="clear"></div> </div>