Responsive HTML5 CSS Grid

Welcome to the highest rated Responsive HTML5 CSS grid, on CodeCanyon.

CSS Grid is a simple responsive css grid system from 1 to 8 columns which uses CSS, HTML and Javascript for the Header and Navigation.

View the demo on CSS Grid or read instructions on how to use it.

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.

Features:

• 1 to 8 columns
• Fixed or Percentage Columns
• Column variations
• Use fluid columns or add margins
• Stack columns on mobile
• 4 Header Options – Static, Fixed, Sticky or Reveal
• 3 Navigation Options – Right, Left or Centre
• Easy Setup
• CSS Animation for Mobile Toggle Menu
• Detailed Instructions

Compatible with:

• Chrome
• Firefox
• Safari
• iOS
• Android
• IE 10/11

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.

Reviews

Updates

------------------------------------------------------------------------
v 7.0 (24 March 2017)

* Re-built the CSS file
* All CSS files are now merged in 1 CSS file
* Retained functions for (f) Fixed and (p) Percentage Columns
* Retained functions for Stacking Columns
* Simplified the CSS code for the Header and Navigation
* Re-built Mobile Toggle Menu button. This is now animated CSS
* New: Add margins to the columns by adding margins to the outer div
* New: Header option, Reveal
* New: Navigation positions, Right, Left, Center
* New: Button added for Mobile: close-side, click anywhere on website to close the navigation
* New: Re-written Instructions
------------------------------------------------------------------------
v 6.0 (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:

css/nav-top.css
css/nav-left.css
css/nav-right.css
js/toggle.js

HTML Pages:

* Removed clear div on nav after end of ul
------------------------------------------------------------------------
v 5.0 (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 4.0 (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 3.0 (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 2.0 (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 cssgrid.co.
Available exclusively at CodeCanyon from Envato.