Trinity grid ☲

Because 12 columns is sometimes too much

1 - Download

Github .zip

Or : $ bower install trinity-grid

2 - Install

<link rel="stylesheet" href="trinity.css" />

3 - Enjoy

<div class="t-1" >...</div>

Trinity is simple

The trinity grid is so simple, it uses only 3 different sizes :

Class
Size
Definition
.t-1
100%
Full width
.t-2
50%
Half width
.t-3
33.33%
1/3 width

Responsive breakpoints

Responsive web design is a must when you have to deals with multi devices screen problem, thats why Trinity is perfectly responsive, but you can choose to create a non-responsive grid by adding the class -s (for static) to your trinity bloc.

560px
 
 
.t-1
100%
Full width
.t-2
50%
Half width
.t-3
100%
Full width
420px
 
 
.t-1
100%
Full width
.t-2
100%
Full width
.t-3
100%
Full width

Here is a Trinity demo

The basic grid: 

<div class="t-1">
<div class="t-1"></div>

<div class="t-2"></div>
<div class="t-2"></div>

<div class="t-3"></div>
<div class="t-3"></div>
<div class="t-3"></div>
</div>
 
 
 
 
 
 

The nested grid: 

<div class="t-1">
  <div class="t-3"> </div>
  <div class="t-3"> </div>
  <div class="t-3"> </div>
</div>

<div class="t-2">
  <div class="t-2"></div>
  <div class="t-2"></div>
</div>
<div class="t-2">
  <div class="t-2"></div>
  <div class="t-2"></div>
</div>

<div class="t-3">
  <div class="t-2"></div>
  <div class="t-2"></div>
</div>
<div class="t-3">
  <div class="t-2"></div>
  <div class="t-2"></div>
</div>
<div class="t-3">
  <div class="t-2"></div>
  <div class="t-2"></div>
</div>
 
 
 

The offset grid: 

<div class="t-3-o-3"> </div>
<div class="t-3-o-2"> </div>
<div class="t-3-o-1"> </div>

<div class="t-2-o-1"></div>
<div class="t-2-o-2"></div>

<div class="t-1"></div>
 
 
 

The offset nested grid: 

<div class="t-1">
  <div class="t-3">
    <div class="t-3-o-3"> </div>
    <div class="t-3-o-2"> </div>
    <div class="t-3-o-1"> </div>
  </div>
  <div class="t-3">
    <div class="t-3-o-1"> </div>
    <div class="t-3-o-2"> </div>
    <div class="t-3-o-3"> </div>
  </div>
  <div class="t-3">
      <div class="t-3-o-3"> </div>
      <div class="t-3-o-2"> </div>
      <div class="t-3-o-1"> </div>
  </div>
</div>

<div class="t-1">
  <div class="t-2">
    <div class="t-2-o-1"></div>
    <div class="t-2-o-2"></div>
  </div>
  <div class="t-2">
    <div class="t-2-o-2"></div>
    <div class="t-2-o-1"></div>
  </div>
</div>
<div class="t-1">
  <div class="t-2">
    <div class="t-3-o-1"></div>
    <div class="t-3-o-2"></div>
    <div class="t-3-o-3"></div>
  </div>
  <div class="t-2">
    <div class="t-3-o-3"></div>
    <div class="t-3-o-2"></div> 
    <div class="t-3-o-1"></div> 
  </div>
</div>
 
 
 
 
 
 
 
 
 

The basic grid (non-responsive): 

<div class="t-1">
<div class="t-1-s"></div>

<div class="t-2-s"></div>
<div class="t-2-s"></div>

<div class="t-3-s"></div>
<div class="t-3-s"></div>
<div class="t-3-s"></div>
</div>
 
 
 
 
 
 

The nested grid (non-responsive): 

<div class="t-1">
  <div class="t-3-s"> </div>
  <div class="t-3-s"> </div>
  <div class="t-3-s"> </div>
</div>

<div class="t-2-s">
  <div class="t-2-s"></div>
  <div class="t-2-s"></div>
</div>
<div class="t-2-s">
  <div class="t-2-s"></div>
  <div class="t-2-s"></div>
</div>

<div class="t-3-s">
  <div class="t-2-s"></div>
  <div class="t-2-s"></div>
</div>
<div class="t-3-s">
  <div class="t-2-s"></div>
  <div class="t-2-s"></div>
</div>
<div class="t-3-s">
  <div class="t-2-s"></div>
  <div class="t-2-s"></div>
</div>
 
 
 

Here are some examples :

Dummy narrow template Dummy fluid template Dummy narrow static template Dummy fluid template