Latest web development tutorials

Responsive Web Design - Grid View

What is a grid view?

Many Web pages are grid-based design, meaning that the page is based on column layout.

Use grid view help us to design web pages. This allows us to add a page element becomes easier.

Responsive grid view is usually 12, a width of 100%, when the browser window is resized automatically retractable.

Responsive grid view


Create a responsive grid view

Next we create a responsive grid view.

First make sure all HTML elements havebox-sizing property and set to border-box.

Ensure margins and borders contained between the width and height of the element.

Add the following code:

* {
    box-sizing: border-box;
}

See more box-sizing please click: CSS3 box-sizing property .

The following example demonstrates a simple responsive Web page that contains two columns:

Examples

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

try it"

Examples include the above two.

Grid system 12 can better control responsive website.

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

Specified in each columnclass, class = "col-" is used to define each column has several 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"

All columns left floating, spacing (padding) to 15px:

CSS:

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

Each row using <div> package. All columns should add up to 12:

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

Column behavior left floating, and add clear float:

CSS:

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

We can add some style and color, let it look better:

Examples

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"