The Easiest Responsive Grid … Ever

Posted by Richard on

A responsive grid is not a framework, but a development feature that can be easily added to any website. It allows dynamic resizing of a page to fit today’s abundant variety of screens, including mobile and other handheld devices. Like most of my other creations, this 12-column grid is extremely lightweight and is absent of all the extra frills that you probably don’t need. It is completely vanilla and ready for customization: no JavaScript, no fonts, no colors, no complicated IE hacks.

The Richard’s Ramblings… site uses basically the same mobile-first responsive grid as published below. You can view the results by resizing your browser window. Once the window size decreases to that of a smart phone or small tablet, the columns become fixed width and vertically aligned.

Sample HTML Code

<div class="fixed clearfix">
  <div class="eight columns">Primary content</div>
  <div class="four columns last">Secondary content</div>
</div>

Replace “fixed” with “fluid” in line 1 (highlighted) of the sample code above to switch from a constrained viewing window to full window width, while still retaining dynamic resizing. Personally, I don’t like the “classic” 960 grid, and prefer the 1140 or larger grids. That said, the flexibility of this mobile-first grid allows you to change the maximum width in the fixed layout; just replace “max-width:1140px” with “max-width:960px” (or whatever width you prefer) in line 15 (highlighted) of the stylesheet below.

Barebones Stylesheet

body,.container,.fixed,.fluid {margin:0 auto} body {width:94%}
.clearfix {clear:both; height:1%; zoom:1} * {box-sizing:border-box}
.clearfix:after {content:".";display:block;height:0;visibility:hidden}
.column,.columns {
  float:none;margin:0 3% 1em 0;padding:10px 0;width:99%;
}
@media only screen and (min-width: 768px) {
  .one.column,.one.columns {width:5.5%} .two.columns {width:14%}
  .three.columns {width:22.5%} .four.columns {width:31%}
  .five.columns {width:39.5%} .six.columns {width:48%}
  .seven.columns {width:56.5%} .eight.columns {width:65%}
  .nine.columns {width:73.5%} .ten.columns {width:82%}
  .eleven.columns {width:90.5%} .twelve.columns {width:99%}
  .column,.columns {position:relative; float:left; display:inline;}
  .last,.twelve.columns {margin-right:0} .fixed {max-width:1140px}
}
@media only screen and (max-width: 767px) {
  .container,.fixed,.fluid {width:300px}
  .column,.columns {margin-right:0; width:300px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container,.fixed,.fluid {width:420px}
  .column,.columns {margin-right:0; width:420px;}
}

This is an ideal responsive grid if you want to incorporate grids into your existing website. Those starting a site from scratch may want the extra user interface features, widgets, and styles contained in larger, all-in-one packages. For new installations, I suggest one of the following excellent solutions, all of which I have personally used in various projects:

  • Bones (a barebones responsive WordPress theme)
  • Bootstrap (from the guys at Twitter)
  • Foundation (very similar to Bootstrap)
  • Skeleton (lighter weight than Foundation)