Responsive Web Design - Grid View

What is a Grid View?

Many web pages are based on a grid design, which means the page is laid out in columns.

Using a grid view helps us design web pages. It makes it easier to add elements to the page.

A responsive grid view typically consists of 12 columns, spans 100% width, and automatically adjusts when the browser window is resized.

Responsive Grid View

Creating a Responsive Grid View

Next, let's create a responsive grid view.

First, ensure that all HTML elements have the box-sizing attribute set to border-box.

Ensure that margins and borders are included within the element's width and height.

Add the following code:

* {
    box-sizing: border-box;
}

For more information on box-sizing, click here: CSS3 box-sizing Property.

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

Example

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

The above example contains two columns.

A 12-column grid system provides better control over responsive web pages.

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

Specify the class in each column, class="col-" to define how many spans each column has:

CSS:

All columns float to the left with a padding of 15px:

CSS:

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

Each row is wrapped in a <div>. The total number of columns should add up to 12:

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

Columns are floated to the left, and clear floats are added:

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;}