Responsive Web Design - Grid View

What is a grid view?

Many web pages are based on grid views (grid-view), which means the page is divided into several columns:

Using grid views is very helpful when designing web pages. This makes it easier to place elements on the page.

Responsive grid views typically have 12 columns, a total width of 100%, and will shrink and expand when the browser window size is adjusted.

Build responsive grid view

Let's start building a responsive grid view.

First, make sure all HTML elements box-sizing property is set to border-boxThis ensures that the total width and height of the element include padding (fill) and border.

Please add the following code to CSS:

* {
  box-sizing: border-box;
}

Please visit our CSS Box Sizing Read more about the box-sizing property in this chapter.

The following example demonstrates a simple responsive web page that includes two columns:

25%
75%

Example

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

Try It Yourself

If the web page only contains two columns, the above example is quite good.

However, we want to use a responsive grid view with 12 columns to better control the web page.

First, we must calculate the percentage of a single column: 100% / 12 columns = 8.33%.

Then, we create a class for each of the 12 columns, that is class="col-" and a number, which defines the number of columns this section 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 these columns should float to the left and have a 15px padding:

CSS:

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

Each row should be enclosed in <div> The total number of columns within the inline layout should always be 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

All the columns within the inline layout float to the left, which moves them out of the page flow and places other elements, as if these columns do not exist. To prevent this, we will add a clear float style:

CSS:

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

We also want to add some styles and colors to make it look more beautiful:

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

Please note that when you adjust the browser window width to very small, the example web page does not look ideal. In the next chapter, you will learn how to solve this problem.