Responsive Web Design - Grid View
May 03, 2021 CSS
Table of contents
Responsive Web Design - Grid View
What is a grid view?
Many web pages are grid-based, which means that pages are laid out by column.
Using grid views helps us design web pages. This makes it easier for us to add elements to a Web page.
A responsive grid view is typically 12 columns, 100% wide, and automatically scales when the browser window is resized.
Create a responsive grid view
Let's create a responsive grid view.
First make sure that all HTML elements have a box-sizing property and are set to border-box.
Make sure that margins and borders are contained between the width and height of the element.
Add the following code:
* { box-sizing: border-box; }
* {
box-sizing: border-box;
}
For more box-sizing content, click on: CSS3 box-sizing properties.
The following example demonstrates a simple responsive Web page with two columns:
The above example contains two columns.
The 12-column grid system provides better control over responsive web pages.
First we can calculate the percentage of each column: 100% / 12 columns . . . 8.33%.
Specify class in each column, class" " col-" to define how many spans each column has:
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 out . . .
All columns float to the left, with a pitch of 15px:
Css:
float: left;
padding: 15px;
border: 1px solid red; }
Each line is wrapped with a .lt;div.gt. All columns should add up to 12:
< div class= "col-3" > ... < /div >
< div class= "col-9" > ... < /div >
< /div >
The behavior in the column floats to the left, and adds a clear float:
Css:
content: "";
clear: both;
display: block; }
We can add some styles and colors to make them look better:
background-color: #9933cc;
color: #ffffff;
padding: 15px; }
.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 out . . .