Created: 13 June 2013. Updated: 24th March 2017
By: Lee Borowiak (CSSGrid)
Email: support@cssgrid.co
Version 6 instructions are still online if required.
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. It's a great starting point for building responsive websites.
To use CSS Grid, all you need to do is add the css file above the closing head, as follows:
<link rel="stylesheet" type="text/css" media="all" href="css/cssgrid.css" />
</head>
<body>
If you would like to use the Header and Navigation, then you also need to add the header.css file and then the Javascript files at the bottom, before the closing body.
Here's how the css would look if you're using the css grid and the header.
<link rel="stylesheet" type="text/css" media="all" href="css/cssgrid.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/header.css" />
</head>
<body>
Here's where you need to add the Javascript files, just before the closing body:
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</body>
CSS Grid uses CSS and HTML to build the column layouts. The columns are built using the same method for each set. All columns before the last one use float:left. The last column doesn't use float:left, instead margin-left is used to position it at the end of the row.
Here's an example of the CSS for 2 columns:
If the first column is 50% width, then the last column would need margin-left:50%; to make it clear of the first column.
.f2 .one,
.p2 .one {
width:50%;
float:left;
}
.f2 .two,
.p2 .two {
width:50%;
margin-left:50%;
}
The columns are displayed on the webpage using html. An outer div is used, using either f (fixed) or p (percentage) followed by the number of columns, eg: 2.
Then within the outer div, add the columns.
Here's an example of 2 columns, percentage, which means they will fit 100% width of the page:
<div class="p2">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
Here's an example of 4 columns, percentage:
<div class="p4">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
<div class="three">
Column 3
</div>
<div class="four">
Column 4
</div>
</div>
Quite often each column will vary in height due to content. Adding clearfix to the outer div ensures that each row of columns clear from each other and don't overlap.
Here's how to use clearfix:
<div class="p2 clearfix">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
You can use different width columns too. Let's say you want to have a 4 column grid and you want to have the first 2 columns 25% width and the last one 50% width. You need to combine the last 2 together using three-four.
Here's an example of this:
<div class="p4">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
<div class="three-four">
Column 3 - 4
</div>
</div>
Fixed columns works the same as percentage. Instead of using p (percentage), f (fixed) is used.
Here's an example of 2 columns, fixed width.
<div class="f2">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
Fixed columns means the width is fixed and changes width depending on the browser width. This is controlled in the media queries.
An example of this is as follows. This fixes the width to 980px when the browser is above 1024px:
@media screen and (min-width: 1024px) {
.f1, .f2, .f3, .f4, .f5, .f6, .f7, .f8 {
width:980px;
}
}
This fixes the width to 730px on browsers between 768px and 1023px:
@media screen and (min-width: 768px) and (max-width: 1023px) {
.f1, .f2, .f3, .f4, .f5, .f6, .f7, .f8 {
width:730px;
}
}
Margins adds spaces between the columns. To add margins between the columns, add margins on the outer div.
Here's an example:
<div class="p2 margins">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
Here's an example of how the CSS looks when margins are used:
.f2.margins .one,
.p2.margins .one {
width:49.5%;
float:left;
}
.f2.margins .two,
.p2.margins .two {
width:49.5%;
margin-left:50.5%;
}
Stacking columns means the columns will stack on top of each other on browser widths smaller than 767px.
This will stack all the columns to 2 columns on browser widths between 480px and 767px. Then all the columns are stacked to 1 column on browser widths less than 479px.
Add stack to the outer div as follows:
<div class="p2 margins stack">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
If you would like all columns to stack to 1 column below 767px instead of stacking to 2 columns, add stack1.
Here's an example:
<div class="p2 margins stack1">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
There are 4 options for the header. Static, Fixed, Sticky and Reveal.
Static Header
Static means the header acts the same as the rest of the page content. It dissapears as you scroll down.
Here's how you would use static header:
<header class="header-static nav-right">
Fixed Header
Fixed means the header stays in the fixed position as you scroll down.
Here's how you would use fixed header:
<header class="header-fixed nav-right">
Sticky Header
Sticky means the header will stick to the top once it reaches the top. This means you can have any content above it and it will stay fixed once it reaches the top.
Here's how you would use sticky header:
<header class="header-sticky nav-right">
Reveal Header
Reveal means the header will disappear when scrolling down and re-appear when scrolling up.
Here's how you would use reveal header:
<header class="header-reveal nav-right">
There are 3 options for the navigation. Right, Left and Center.
Nav Right will position the navigation to the right and the logo to the left.
Here's how you would use nav-right:
<header class="header-sticky nav-right">
Nav Left will position the navigation to the left and the logo to the right.
Here's how you would use nav-left:
<header class="header-sticky nav-left">
Nav Center will position the navigation and the logo to the center.
Here's how you would use nav-center:
<header class="header-sticky nav-center">
Header and Navigation Example
Here's an example of the Header, Logo and Navigation together:
<!-- Header -->
<header class="header-fixed nav-right clearfix">
<div class="logo">
<a href="index.html" title="Responsive CSS Grid"><strong>CSS</strong> Grid</a>
</div>
<div class="navclosed">
<div class="line-nav-1"></div>
<div class="line-nav-2"></div>
<div class="line-nav-3"></div>
<div class="line-nav-4"></div>
</div>
<div class="close-side"><a href="#"></a></div>
<!-- Nav -->
<nav class="nav">
<ul class="nav-buttons nav-off">
<li><a href="#">Page 1</a>
<ul>
<li><a href="page-inner1.html">Page Inner 1</a></li>
<li><a href="page-inner2.html">Page Inner 2</a></li>
<li><a href="page-inner3.html">Page Inner 3</a></li>
</ul>
</li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</nav>
<!-- / Nav -->
</header>
<!-- / Header -->
Responsive Navigation
The Responsive Navigation is controlled in css/header.css using media queries. The Responsive Navigation becomes active between 0px and 767px width.
Using Navigation Buttons
You can use a standard set of buttons or buttons which have a dropdown menu.
Here's how to use standard buttons:
<nav class="nav">
<ul class="nav-buttons nav-off">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</nav>
Dropdown buttons have ul li within the li.
Here's how to use dropdown buttons:
<nav class="nav">
<ul class="nav-buttons nav-off">
<li><a href="#">Page 1</a>
<ul>
<li><a href="page-inner1.html">Page Inner 1</a></li>
<li><a href="page-inner2.html">Page Inner 2</a></li>
<li><a href="page-inner3.html">Page Inner 3</a></li>
</ul>
</li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</nav>
PSD files are included with this file. They are located in the folder named /psd/
The font used in CSS Grid is called Poppins and can be downloaded here from Google Fonts.
Thank you for purchasing CSS Grid. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thank you for your support!