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.

DEMO

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.

.box{
	height:100px;
	border:1px solid #CCC;
	padding:10px;
	box-sizing:border-box;
}

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.

DEMO
View Source

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>