Responsive Web Design – Grid-View
What is a Grid-View?
Many websites are built using a grid layout, in which the content is organized into columns:
It is quite useful to develop web pages with a grid-view. It facilitates the arrangement of elements on the page.
A responsive grid-view will resize and expand in response to browser window resizing. It typically has 12 columns and a total width of 100%.
Building a Responsive Grid-View
Begin constructing a responsive grid-view now.
First, make sure that the box-sizing property is set to border-box for every HTML element. This ensures that the items’ overall width and height include the padding and border.
Include the subsequent code in your CSS:
See our CSS Box Sizing chapter for additional information on the box-sizing property.
An example of a basic responsive website with two columns may be found below:
Example
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
If there are just two columns on the webpage, the example above is acceptable.
To have more control over the website, we would like to employ a 12-column responsive grid-view.
The proportion for one column must first be determined: 100% / 12 columns = 8.33%.
Next, we create a class called class=”col-“ for each of the 12 columns, along with a number designating the total number of columns the 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%;}
Each of these columns has to have a 15px padding and be floating to the left:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
A <div> should enclose each row. A row’s total number of columns should always equal twelve.
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Other elements will be positioned as though the columns do not exist because all of the columns within a row are floating to the left and are thus removed from the page’s flow. We’ll add a style that breaks the flow to stop this:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
To improve the way it looks, we also want to add various colors and styles:
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;
}
When you resize the browser window to a very small width, you will see that the example webpage no longer looks good. You will find out how to remedy that in the upcoming chapter.
