The Simplest HTML5 & CSS3 Responsive Grid Ever

This has to be the simplest responsive grid or framework ever. Its so lightweight & can be built in minutes from scratch. No need for bloated frameworks like Twitter Bootstrap.


It uses (only) 2 new CSS3 features:

  1. box-sizing
  2. calc()

The ‘box-sizing‘ property should by now be familiar to every front-end developer by now. It forces the browser to include one or more of the padding, border & margin in the specified height and/or width. For example we’ve set our height to 100px, padding to 10px & a border of 1 pixel below.

	border:1px solid #CCC;

Usually, the css box-model would create a box covering a total height of 122px (100px height, 10px by 2 padding for the top & bottom & 1px x 2 for the border top & bottom). With ‘box-sizing’ set to ‘border-box’ the total height is set to 100px, therefore the area available for content is 78px;

The ‘calc()‘ unit value calculator allows us to calculate values by mixing multiple unit types, in our case its percentages & pixels but you can use any css values. These can be added, subtracted, multiplied or divided. The declaration would look something like this:

width:calc(100% - 20px)

Lets say the element in question is in a container 1000px wide, the element would be 980px wide.

box-sizing‘ can be used in this way on Chrome, Firefox (with vendor prefix), Safari, Opera & IE8+
calc()‘ can be used with Chrome, Firefox, Safari (with vendor prefix), Opera & IE9+

The demo below demonstrates the technique with 4, 3, 2 & 1 columns with 2 break points. On desktop it responds at 480px & on iPad it can be demo-ed successfully by rotating the device from landscape to portrait or vice versa.

View Source

Simple Responsive Mobile Template

I was playing about with media queries & CSS to test a responsive HTML5 template that adjusts to any device whose width is less than 960px. Its not perfect, just a first attempt. Feel free to use it if you like. You can test it on your mobile or by narrowing your browser.

View Demo»

Some features include:

View Demo»