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.
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 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-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:
float: left;
padding: 15px;
border: 1px solid red;
}
Each row using <div> package. All columns should add up to 12:
<Div class = "col-3 "> ... </ div>
<Div class = "col-9 "> ... </ div>
</ Div>
Column behavior left floating, and add clear float:
CSS:
content: "";
clear: both;
display: block;
}
We can add some style and color, let it look better:
Examples
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"