Responsive grid based design one of the key ingredients of responsive web design. 

As designers you will have made tens or hundreds of grid-based layouts mostly around 960px. When it comes to responsive design you could start with the same 960 grid however the best practice has become to start with a mobile first design.

Responsive Grids are the best way to get started with your responsive layout and come in many forms. Use an existing framework or build one yourself, it’s totally up to you.

The first step in the grid based design is to make sure that everything reverts back to 100% with ample vertical margins between the elements and padding from the edge of the device viewport.  From there you are able to float the elements and allow the natural stacking.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.