Responsive HTML5 CSS Grid

Welcome to the highest rated responsive CSS grid, on CodeCanyon.

CSS Grid is a valid HTML5, responsive CSS Grid from 1 to 8 columns. It works on iPhone, iPad, Google Android and Windows 8. It also features a Mobile Toggle Menu, as well as 3 header options. Take a look at the demo.
Why is this different to other CSS grids?
There are many grids out there already, but after working on several responsive websites, I found most of them to be quite complex for beginners, so I developed this simple solution where developers at all levels would be able to use it.
Main Features
  • 1 to 8 columns
  • With or without column padding
  • Easy HTML Setup
  • Fixed or Percentage Columns (or mix them)
  • Mobile Toggle Menu uses CSS3 and Javascript
  • 3 header options, sticky, fixed, static.
  • Use stack class to automatically stack columns
  • Use CSS3 animate class to animate the transition between columns
Other Features
  • Detailed Instructions
  • Retina screen support
  • Works on: iPad, iPhone, HTC, Nokia, Samsung, Sony, LG, Blackerry
  • PSD files included for 1024, 768, 480, 320
Tested and compatible with:
  • iOS 5, 6, 7, 8+
  • Android 2.5+
  • Safari 5+
  • Chrome 27.0+
  • IE 9, 10, 11
  • Windows 8 (IE 10)
Need some help?
Feel free to get in touch if you have any questions and I will get back to you as soon as possible.

v 1.6 (12 February 2015)

* Re-built the navigation so it fits inside header
* Cleaned up 3 Nav CSS files and added menus at top.
* Updated mobile toggle menu slide transition
* Added return false; to js/toggle.js to stop page jumping to top

* New function added: .sticky
This makes the nav stick to top after scrolling page

Amended CSS files:


HTML Pages:

* Removed clear div on nav after end of ul

v 1.5 (15 May 2014)

* Updated Javascript to js/jquery-1.9.1.min.js
* Stack columns updated, now with 2 options:
  .stack - Stacks to 2 columns, less than 768 and 1 column less than 480
  .stack1 - Stacks to 1 column, less than 768
* Cleaned up CSS
* Added code boxes to some pages to show how to use the columns
* Changed Toggle Nav so animations are slower and smoother
* Re-worked the instructions so they are easier to follow
v 1.4 (04 February 2014)

* Nav Top, Fixed + Static, Logo changed to be aligned left, and menu aligned right
* Fixed dropdown on web version. 
  position:relative; added to ul.navig li on the 3 nav css files
v 1.3 (18 December 2013)

* Toggle Nav, CSS3 Transitions
* Toggle Nav, Fixed and Static Position options
* Toggle Nav, Top, Left and Right options
* Animated transitions for HTML when @media changes
* Updated instructions and PSD files
v 1.2 (13 September 2013)

* Toggle Nav, simplified code
* Toggle Nav, changed to stack on top instead of overlapping content
* Stack CSS added, allowing easy option to stack DIVs for narrow width
v 1.1 (11 July 2013)

* Toggle Nav Added for narrow widths
v 1.0 (14 June 2013)

* Released

This Responsive CSS Grid was developed by
Available exclusively at CodeCanyon from Envato.



1091 sales
as of November 28, 2016
Last Update February 14, 2015, 6:29 am
High Resolution Yes
Compatible Browsers IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
Software Version HTML5