Something of a grid.

layout.less

@@ -1,5 +1,18 @@
 @basesize: 1em;
 
+.clearfix() {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
 body{
   margin: @basesize 2 * @basesize;
   font-size: @basesize;
@@ -36,3 +49,31 @@ acronym {
 .hidden {
   display: none;
 }
+
+.grid (@cols: 16) {
+  @gutter: 1.5 * @basesize;
+  .clearfix();
+  .col(@width: 1) {
+    //display: block;
+    float: left;
+    padding-left: @gutter;
+    width: percentage(@width / @cols);
+  }
+  .column   { .col();   }
+  .column2  { .col(2);  }
+  .column3  { .col(3);  }
+  .column4  { .col(4);  }
+  .column5  { .col(5);  }
+  .column6  { .col(6);  }
+  .column7  { .col(7);  }
+  .column8  { .col(8);  }
+  .column9  { .col(9);  }
+  .column10 { .col(10); }
+  .column11 { .col(11); }
+  .column12 { .col(12); }
+  .column13 { .col(13); }
+  .column14 { .col(14); }
+  .column15 { .col(15); }
+  .column16 { .col(16); }
+  margin-left: -1.5 * @gutter;
+}

sample/index.html

@@ -20,6 +20,7 @@
         <li><a href="#tables">Tables</a></li>
       </ul>
     </div>
+    <div class="container_page">
     <div class="column">
       <h4>How it's done</h4>
       <p>The page has its own <acronym title="Leaner Cascade Style Sheet">LESS</acronym> stylesheet, which compiles into <acronym title="Cascade Style Sheet">CSS</acronym> one.</p>
@@ -47,6 +48,7 @@
 <p>'I'll tell you how I came to think of it,' said the Knight. 'You see, I said to myself, "The only difficulty is with the feet: the HEAD is high enough already." Now, first I put my head on the top of the gate—then I stand on my head—then the feet are high enough, you see—then I'm over, you see.'</p>
 <p>'Yes, I suppose you'd be over when that was done,' Alice said thoughtfully: 'but don't you think it would be rather hard?'</p>
 <p>'I haven't tried it yet,' the Knight said, gravely: 'so I can't tell for certain—but I'm afraid it WOULD be a little hard.'</p>
+      <div class="container_nested">
         <div class="column">
           <h5>This is a nested column</h5>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
@@ -56,6 +58,7 @@
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
         </div>
       </div>
+      </div>
       <div class="sidebar">
         <h3>A <span class="alt">Simple</span> Sidebar</h3>
         <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
@@ -65,6 +68,7 @@
         <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.</p>
         <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
       </div>
+    </div>
       <h3>You may pick and choose amongst these and many more features, so be bold.</h3>
     <div class="story">
       <div class="poem">

sample/sample.less

@@ -6,3 +6,11 @@
     .centered(33%, 33%);
   }
 }
+
+.container_page{
+  .grid(3);
+}
+
+.container_nested {
+  .grid(2);
+}