Created: 13 June 2013. Updated: 12th February 2015
By: Lee Borowiak (CSSGrid)
Email: support@cssgrid.co
CSS Grid is a simple responsive css grid system from 1 to 8 columns, which uses CSS, HTML and some Javascript for the Toggle Navigation Menu. It's a great starting point for building websites which need to work on a variety of browser widths and handheld devices. It also has a Toggle Navigation Menu which is used for browsers less than 768px width.
Once you've added the CSS to your web pages above the < /head>, you just add the HTML to your web pages and everything else is handled within the CSS.
Here's an example of the HTML code you would need to use: (This is an example of fixed width, 2 columns)
<div class="f2">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
See example of fixed width, 2 columns
All the demo files are located in the folder named /css-grid/.
To get started, you need to add the following CSS to your web pages.
Each of these files contains the setup of f (fixed) and then the column names, such as .one, .two etc.
default.css This controls colours and fonts.
fixed-1024.css This is loaded if the screen size is equal to 1024 and higher.
fixed-768.css This is loaded if the screen size is between 768 and 1023.
fixed-480.css This is loaded if the screen size is between 480 and 767.
fixed-320.css This is loaded if the screen size is between 0 and 479.
The following contains p (percentage) and then the column names, such as .one, .two etc.
percent.css This is the CSS for the percentage CSS.
If you would like to use the stack class for stacking columns on mobile, then you need to add these files too:
stack2.css This is loaded if the screen size is between 480 and 767.
stack1.css This is loaded if the screen size is between 0 and 479.
stack1-2.css This is loaded if the screen size is between 0 and 767 and is used for stacking to 1 column only.
Here's the code. Add this above the closing </ head> tag:
<!-- Nav Top, Custom for less than 768 -->
<link href="css/nav-top.css" rel="stylesheet" type="text/css" media="all" />
<!-- Default styles, like padding, colours and sizes -->
<link href="css/default.css" rel="stylesheet" type="text/css" media="all" />
<!-- iPad Landscape + -->
<link href="css/fixed-1024.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)">
<!-- iPad Portrait -->
<link href="css/fixed-768.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1023px)">
<!-- iPhone Landscape -->
<link href="css/fixed-480.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)">
<!-- iPhone Portrait -->
<link href="css/fixed-320.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)">
<!-- Percentage Columns -->
<link href="css/percent.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px)">
<!-- Stack Columns. Change min-width to when you would like stacked columns to start and max-width to when you would like it to end -->
<link href="css/stack2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)">
<link href="css/stack1.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)">
<link href="css/stack1-2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 767px)">
</head>
<body>
Here's the Javascript for the bottom of the page:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>
</body>
</html>
The website content needs to be placed within the body, like this:
<body>
Your content here...
</body>
You can use either fixed or percentage widths using f or p.
The following code uses 2 columns and is fixed. To use fixed widths, simply use f in the div class as follows:
<div class="f2">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
See example of fixed width, 2 columns
The following code uses 2 columns and is percentage width. To use percentage widths, simply use p in the div class as follows:
<div class="p2">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
See example of percentage width, 2 columns
Next you need to add the number of columns. You can choose from 1 to 8. Lets say you want a fixed outer div and you want 4 columns. The code would look like this:
<div class="f4">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
<div class="three">
Column 2
</div>
<div class="four">
Column 2
</div>
</div>
See example of fixed width, 4 columns
Whatever number you have added for the outer div, you need to make sure the amount of inner column divs match up.
Here's an example of using 5.
<div class="f5">
<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 class="five">
Column 5
</div>
</div>
If you need to use different column widths, you simply select the FROM and TO amount. For example, if you want 5 columns, you want the 1st column to be 1 column, and the other 4 to stretch accross, you would need to add: two-five as follows:
<div class="f5">
<div class="one">
Column 1
</div>
<div class="two-five">
Column 2 - 5
</div>
</div>
See example of 5 columns, 1 column and 4 stretched
When the CSS changes, you can make the columns animate. This makes the transition between the changes look smooth. All you need to do is add animate to the div.
<div class="f5 animate">
<div class="one">
Column 1
</div>
<div class="two-five">
Column 2 - 5
</div>
</div>
See example of 5 columns with animated transitions
In some cases, you might need to mix fixed width and percentage width. An example of this might be you would like fixed width above 768, and percentage width below 768.
To achieve this, duplicate percent.css and rename to something else, perhaps percent-custom.css. Then within this new file change all the p references to f. This is because on the HTML file all the divs are referenced as f.
Here's the new css file.
<!-- Percentage Columns -->
<link href="css/percent-custom.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 767px)">
Here's how the css would look. Note how this replaces 480.css and 320.css:
<!-- iPad Landscape + -->
<link href="css/fixed-1024.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)">
<!-- iPad Portrait -->
<link href="css/fixed-768.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1023px)">
<!-- Percentage Columns -->
<link href="css/percent-custom.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 767px)">
<!-- Stack Columns. Change min-width to when you would like stacked columns to start and max-width to when you would like it to end -->
<link href="css/stack2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)">
<link href="css/stack1.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)">
<link href="css/stack1-2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 767px)">
See example of percentage width below 768px
If you wish to change column padding, you will need to work out the numbers accordingly and ensure they add up to the outer div total. For example, look inside css/fixed-1024.css you will see the outer div width is 986px and the column padding is 14px. Here's the CSS for 4 columns:
.f1, /* outer div width */
.f2,
.f3,
.f4,
.f5,
.f6,
.f7,
.f8 {
width:986px;
}
.f4 .one {
width:236px;
float:left;
}
.f4 .two {
width:236px;
margin-left:14px;
float:left;
}
.f4 .three {
width:236px;
margin-left:14px;
float:left;
}
.f4 .four {
width:236px;
/*
To set the correct position for the last column, add up all columns to the left and add on the padding.
In this case: 236 x 3 + 14 + 14 + 14 = 750
*/
margin-left:750px;
}
The column padding used in css/percentage.css is 1%.
If you wish to change the column percentage padding, you will need to ensure everything adds up to 100%.
For example, here's the code for 2 columns. The padding in the middle is 1%, so each of the 2 columns needs to be width of 49.5%:
.p1, /* outer div width */
.p2,
.p3,
.p4,
.p5,
.p6,
.p7,
.p8 {
width:auto;
}
.p2 .one {
width:49.5%;
float:left;
}
.p2 .two {
width:49.5%;
margin-left:50.5%; /* 49.5 + 1% = 50.5 */
}
When the width of a browser gets narrow, like on iPhones and other mobiles you will, in most cases, need the content to stack on top of each other so it fits nicely. All you need to do is add stack to the outer div, like this.
<div class="p2 stack">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
By adding stack this will automatically stack all columns to 2 on browsers less than 768 and then stack to 1 column on less than 480. You can force them to just stack to 1 column on browsers less than 768 by using stack1 like this:
<div class="p2 stack1">
<div class="one">
Column 1
</div>
<div class="two">
Column 2
</div>
</div>
This is all controlled in the following css files:
<link href="css/stack2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)">
<link href="css/stack1.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)">
<link href="css/stack1-2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 767px)">
There are 3 ways to use the Toggle Navigation Menu. You can make it toggle from the top, left or right. All you need to do is add the CSS accordingly, and then add the HTML for the Navigation (See 6B. HTML).
To use Top navigation, add this:
<link href="css/nav-top.css" rel="stylesheet" type="text/css" media="all" />
To use Left navigation, change to this:
<link href="css/nav-left.css" rel="stylesheet" type="text/css" media="all" />
See example of Left Navigation
To use Right navigation, change to this:
<link href="css/nav-right.css" rel="stylesheet" type="text/css" media="all" />
See example of Right Navigation
Next you need to add the HTML for the Header & Navigation.
<!-- Header -->
<header class="header sticky">
<div class="logo"><a href="index.html" title="responsive website css grid">CSS <span>Grid</span></a></div>
<!-- Nav Toggle Button -->
<div class="navclosed slide">
<a href="#" title="Menu"></a>
</div>
<!-- Nav Toggle Button End -->
<!-- Nav -->
<nav>
<ul class="nav-buttons">
<li><a href="#" class="dropdown">Nav Options</a>
<ul>
<li><a href="page.html">Button</a></li>
<li><a href="page.html">Button</a></li>
<li><a href="page.html">Button</a></li>
</ul>
</li>
<li><a href="#" class="dropdown">Column Options</a>
<ul>
<li><a href="page.html">Button</a></li>
<li><a href="page.html">Button</a></li>
<li><a href="page.html">Button</a></li>
</ul>
</li>
<li><a href="#" class="dropdown">Stacking Columns</a>
<ul>
<li><a href="page.html">Button</a></li>
<li><a href="page.html">Button</a></li>
<li><a href="page.html">Button</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Nav End -->
</header>
<!-- Header End -->
The navigation buttons are here:
<!-- Nav -->
<nav>
<ul class="nav-buttons">
<li><a href="#" class="dropdown">Drop Down Menu 1</a>
<ul>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
</ul>
</li>
<li><a href="#" class="dropdown">Drop Down Menu 2</a>
<ul>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
</ul>
</li>
<li><a href="#" class="dropdown">Drop Down Menu 3</a>
<ul>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Nav End -->
This is the nav with standard buttons:
<!-- Nav -->
<nav>
<ul class="nav-buttons">
<li><a href="mypage.html">Button 1</a><ul>
<li><a href="mypage.html">Button 2</a><ul>
<li><a href="mypage.html">Button 3</a><ul>
</ul>
</nav>
<!-- Nav End -->
This is the nav with dropdown buttons:
<!-- Nav -->
<nav>
<ul class="nav-buttons">
<li><a href="#" class="dropdown">Drop Down Menu 1</a>
<ul>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
</ul>
</li>
<li><a href="#" class="dropdown">Drop Down Menu 2</a>
<ul>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
<li><a href="mypage.html">Button</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Nav End -->
The Header & Menu has 3 options, sticky (sticks to top when header reaches the top), fixed (stays fixed to top when scrolling), and static (stays at top of page and out of sight when scrolling). Here's how to do it.
Make the header sticky:
<div class="header sticky">
If you would like the nav to be permanently fixed to the top when scrolling, you need to add fixed to the header.
Here's how it should look:
<div class="header fixed">
To make it static, just keep it as header:
<div class="header">
Most of the latest smartphones and tablets have a higher resolution (twice the resolution) than standard desktops, and the icons for opening and closing the Toggle Navigation Menu may look blurry. If this is the case, you need to use an icon image which is twice the pixel size of the original icon. For example, if you have an image which is 40px (width) x 40px (height), 72dpi, you need to use one which is 80px (width) x 80px (height) and 72dpi.
All you need to do is check if the device pixel ratio is higher than 1, and load alternative images such as nav2x.png and then specify the width of the image by using background-size:40px;.
Here's how to do it:
/* Change images to higher res versions, if screen resolution is greater than 1 pixel density, such as Retina on Apple devices. */
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
.navclosed {
background-image: url(../images/nav2x.png);
background-repeat: no-repeat;
background-position: left top;
background-size:40px;
-moz-background-size:40px;
}
.navclicked {
background-image: url(../images/nav2x.png);
background-repeat: no-repeat;
background-position: left -40px;
background-size:40px;
-moz-background-size:40px;
}
ul.navig li a.dropdown,
ul.navig li a.dropdown:hover,
ul.navig li:hover a.dropdown
{
background-image: url(../images/navgrey2x.png);
background-repeat: no-repeat;
background-position: left center;
background-size:40px;
-moz-background-size:40px;
}
}
Compatible with:
iOS 5, 6, 7
Android 2.3.5, 3, 4+
Safari 5+
Chrome 27.0+
IE (Internet Explorer) 9, 10, 11
Windows 8 (IE 10)
Notes: @media queries are used to change the CSS depending on browser width. @media queries don't work on IE8 and lower. You can use Conditional Comments to check if a User is on IE8 or lower. If they are on IE8 or lower, you need to load a single CSS file as an alternative. Add this above the < /head> like this:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="css/fixed-1024.css">
<![endif]-->
Compatible with:
iOS 6, 7, 8
Android 4+
Chrome 27.0+
IE 8, 9, 10, 11
Windows 8 (IE 10)
Some columns (such as 3, 5, 7, 6 and 8) use fractions of a percentage, For example, with 3 colums, each column width is: 33.333%; WebKit rendering engine doesn't render fractions of a percentage too well (known as subpixels). Thus, these percentage columns don't work too well on WebKit browsers, such as Safari 5.1.7 (Released May 9, 2012). According to WebKit, as of January 2013 WebKit now supports subpixels (ENABLE_SUBPIXEL_LAYOUT). The percentage layout has been tested on iOS 6.1.3 and Android 4.0.3 (7th June 2013) but still same issue with columns.
Here's the issue in discussion.
The best way to ensure there are no column issues on WebKit browsers is to only use columns divisible by 100, such as 1, 2, 4, 5.
Fixed Columns
Percentage Columns (using subpixels)
Percentage Columns (no padding)
Percentage Columns 1, 2, 4, 5 (no padding / no subpixels)
See example of fixed width, 2 columns
See example of percentage width, 2 columns
See example of fixed width, 4 columns
See example of 5 columns, 1 column and 4 stretched
See example of fixed width above 320px, and percentage width less than 320px
See example of fixed width less than 1024px, and percentage width above 1024px
See example of percentage columns with inner div (no subpixels)
See example of percentage columns, 1, 2, 4, 5. (no subpixels)
PSD files are included with this file. They are located in the folder named /psd/
The font used in this file is:
Avenir which can be purchased/downloaded from here.
To create a web font, this can be done using Font Squirrel.
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!
