Simple HTML5/CSS3 Grid System

Responsive, more understandable, mobile-first web design grid system that simplifies web development

If you want to use a grid system for your web projects, there are plenty of solutions on the web. The most popular grid systems come from powerful frameworks such as Twitter Bootstrap, Zurb Foundation, Skeleton and others. But if you need a light, easy-to-understand solution for your small- or medium-sized project, a Simple HTML5/CSS3 Grid System could fit your needs.

This system uses straightforward classes which consist of the type of device (“phone,” “tablet,” “desktop,” “big screen”) combined with the column size measured in percentages. So, for example, if you need a block to take up ⅓ of the width on a desktop, ½ of the width on a tablet, and 100% of the width on a phone, you can use class="col-phone-100 col-tablet-50 col-desktop-33". Since the grid is mobile-first, using just class="col-phone-50" will make the block take up ½ of the width on all devices. If you add only desktop class to a block - like class="col-desktop-50" - the block width will be applied only to the desktop and larger screen, and on smaller devices it will have auto width. All grid blocks should be within the so-called “row”; you can use the <div> element for that purpose. The structure should look like this:

<div class=”row”> <div class=”col-phone-100 col-tablet-50”></div> <div class=”col-phone-100 col-tablet-50”></div> </div>

In this case you will have two blocks in a row which will take up 100% of the screen width on mobile devices and ½ of the screen width on tablets, desktops and larger screens.

How it was made

The Simple HTML5/CSS3 Grid System uses a simple, straightforward approach. Blocks are arranged inline with a css “float: left” declaration. The row uses a clearfix approach to fix the zero-height container issue. Width classes are split between @media queries for respective screen width. All classes are listed in the table below:

Class Width
Mobile
.col-phone-10 10% (1/10)
.col-phone-20 20% (1/5)
.col-phone-25 25% (1/4)
.col-phone-33 33.3% (1/3)
.col-phone-50 50% (1/2)
.col-phone-67 66.6% (2/3)
.col-phone-75 75% (3/4)
.col-phone-80 80% (4/5)
.col-phone-90 90% (9/10)
.col-phone-100 100% (full)
Tablet
.col-tablet-10 10% (1/10)
.col-tablet-20 20% (1/5)
.col-tablet-25 25% (1/4)
.col-tablet-33 33.3% (1/3)
.col-tablet-50 50% (1/2)
.col-tablet-67 66.6% (2/3)
.col-tablet-75 75% (3/4)
.col-tablet-80 80% (4/5)
.col-tablet-90 90% (9/10)
.col-tablet-100 100% (full)
Desktop
.col-desktop-10 10% (1/10)
.col-desktop-20 20% (1/5)
.col-desktop-25 25% (1/4)
.col-desktop-33 33.3% (1/3)
.col-desktop-50 50% (1/2)
.col-desktop-67 66.6% (2/3)
.col-desktop-75 75% (3/4)
.col-desktop-80 80% (4/5)
.col-desktop-90 90% (9/10)
.col-desktop-100 100% (full)
Large Screen
.col-big-screen-10 10% (1/10)
.col-big-screen-20 20% (1/5)
.col-big-screen-25 25% (1/4)
.col-big-screen-33 33.3% (1/3)
.col-big-screen-50 50% (1/2)
.col-big-screen-67 66.6% (2/3)
.col-big-screen-75 75% (3/4)
.col-big-screen-80 80% (4/5)
.col-big-screen-90 90% (9/10)
.col-big-screen-100 100% (full)

By default, blocks have left and right padding of 15 pixels, so the distance between block contents is 30 pixels. The row has left and right padding of -15 pixels to remove left and right indents. The Simple HTML5/CSS3 Grid System is supported by all modern browsers and also works on IE 7+. Check the sandbox below for the real-life example.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="row">
<div class="col-phone-100 col-tablet-50 col-desktop-33">
<div class="col-demo">phone 100% / tablet 50% / desktop 33%</div>
</div>
<div class="col-phone-100 col-tablet-50 col-desktop-33">
<div class="col-demo">phone 100% / tablet 50% / desktop 33%</div>
</div>
<div class="col-phone-100 col-tablet-50 col-desktop-33">
<div class="col-demo">phone 100% / tablet 50% / desktop 33%</div>
</div>
<div class="col-phone-100 col-tablet-50 col-desktop-33">
<div class="col-demo">phone 100% / tablet 50% / desktop 33%</div>
</div>
<div class="col-phone-100 col-tablet-100 col-desktop-67">
<div class="col-demo">phone 100% / tablet 100% / desktop 67%</div>
</div>
<div class="col-phone-50 col-big-screen-20">
<div class="col-demo">phone 50% / big screen 20%</div>
</div>
<div class="col-phone-50 col-big-screen-20">
<div class="col-demo">phone 50% / big screen 20%</div>
</div>
<div class="col-phone-50 col-big-screen-20">
<div class="col-demo">phone 50% / big screen 20%</div>
</div>
<div class="col-phone-50 col-big-screen-20">
<div class="col-demo">phone 50% / big screen 20% </div>
</div>
<div class="col-phone-100 col-big-screen-20">
<div class="col-demo">phone 100% / big screen 20%</div>
</div>
</div>
</div>
HTML
* {
margin: 0;
padding: 0;
box-sizing: border-box
}

body {
font-family: Arial, sans-serif;
color: #666;
font-size: 14px;
line-height: 18px
}

.container {
padding: 30px;
}

/* Grid Code Start */
.row {
margin-right: -15px;
margin-left: -15px;
}

.row:before,
.row:after {
display: table;
content: " ";
clear:both
}

.col-phone-10 {width: 10%}
.col-phone-20 {width: 20%}
.col-phone-25 {width: 25%}
.col-phone-33 {width: 33.3333%}
.col-phone-50 {width: 50%}
.col-phone-67 {width: 66.6666%}
.col-phone-75 {width: 75%}
.col-phone-80 {width: 80%}
.col-phone-90 {width: 90%}
.col-phone-100 {width: 100%}

.col-phone-10,
.col-phone-20,
.col-phone-25,
.col-phone-33,
.col-phone-50,
.col-phone-67,
.col-phone-75,
.col-phone-80,
.col-phone-90,
.col-phone-100 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}

@media (min-width: 768px) {
.col-tablet-10 {width: 10%}
.col-tablet-20 {width: 20%}
.col-tablet-25 {width: 25%}
.col-tablet-33 {width: 33.3333%}
.col-tablet-50 {width: 50%}
.col-tablet-67 {width: 66.6666%}
.col-tablet-75 {width: 75%}
.col-tablet-80 {width: 80%}
.col-tablet-90 {width: 90%}

.col-tablet-10,
.col-tablet-20,
.col-tablet-25,
.col-tablet-33,
.col-tablet-50,
.col-tablet-67,
.col-tablet-75,
.col-tablet-80,
.col-tablet-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 992px) {
.col-desktop-10 {width: 10%}
.col-desktop-20 {width: 20%}
.col-desktop-25 {width: 25%}
.col-desktop-33 {width: 33.3333%}
.col-desktop-50 {width: 50%}
.col-desktop-67 {width: 66.6666%}
.col-desktop-75 {width: 75%}
.col-desktop-80 {width: 80%}
.col-desktop-90 {width: 90%}

.col-desktop-10,
.col-desktop-20,
.col-desktop-25,
.col-desktop-33,
.col-desktop-50,
.col-desktop-67,
.col-desktop-75,
.col-desktop-80,
.col-desktop-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
.col-big-screen-10 {width: 10%}
.col-big-screen-20 {width: 20%}
.col-big-screen-25 {width: 25%}
.col-big-screen-33 {width: 33.3333%}
.col-big-screen-50 {width: 50%}
.col-big-screen-67 {width: 66.6666%}
.col-big-screen-75 {width: 75%}
.col-big-screen-80 {width: 80%}
.col-big-screen-90 {width: 90%}

.col-big-screen-10,
.col-big-screen-20,
.col-big-screen-25,
.col-big-screen-33,
.col-big-screen-50,
.col-big-screen-67,
.col-big-screen-75,
.col-big-screen-80,
.col-big-screen-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

/* Grid Code End */

.col-demo {
border: 1px solid #ddd;
background: #f7f7f7;
text-align: center;
padding: 10px 0;
margin-bottom: 20px;
border-radius: 4px;
}

CSS
Browser support:
           
8+