Responsive Web Design - Grid View

---

What is a Grid View?

Many web pages are based on a grid-view, which means the page is divided into columns.

Using a grid-view is very helpful when designing web pages. It makes the work of designing pages easier.

A responsive grid-view often has 12 columns, and has a width of 100%, and will resize automatically to fit the size of the browser window.

Responsive Grid View

---

Creating a Responsive Grid View

Next we will create a responsive grid-view.

First, make sure that all HTML elements have the box-sizing property set to border-box.

This ensures that the padding and border are included in the total width and height of the elements.

Add this:

* {
  box-sizing: border-box;
}

Read more about the box-sizing property in our CSS3 box-sizing page.

The following example shows a simple responsive web page, with two columns:

Example

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

Try it Yourself »

The example above is fine, but it is not responsive yet.

A 12-column grid system can help you better control the responsive web page.

First we can calculate the percentage for each column: 100% / 12 columns = 8.33%.

In each column, we specify a class, class="col-", to define how many columns the element should span:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Try it Yourself »

All the columns are left-floated, and the padding is 15px:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Each row should be wrapped in a <div>. The number of columns inside a row should always add up to 12:

<div class="row">
  <div class="col-3">...</div>
  <div class="col-9">...</div>
</div>

The columns inside a row should be floated left, and the float should be cleared:

CSS:

.row:after {
  content: "";
  clear: both;
  display: block;
}

We can add some styles and colors to make it look better:

Example

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

Try it Yourself »