Responsive Web Design Grid

CSS Tutorial

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

« Previous Next »

Responsive web design make webpage to look good in all device type.

Webpage are designed based on grid view.

A page is divided in to 12 columns.

RWD - Design

Your HTML all elements have box-sizing property.

Set this box-sizing to border-box.

This property are include width and height of elements.

Syntax : box-sizing

* {
box-sizing: border-box;
}

You can also read more about box-sizing in our CSS Box Sizing chapter.

Example : box-sizing

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid blue;
}
.footer {
border: 1px solid blue;
}
.menu {
width: 25%;
float: left;
border: 1px solid blue;
}
.main {
width: 50%;
float: left;
border: 1px solid blue;
}
.main2 {
width: 25%;
float: left;
border: 1px solid blue;
}
</style>
</head>
<body>

<div class="header">
<h1>Header</h1>
</div>

<div class="menu">
<h1>left content</h1>
</div>
<div class="main">
<h1>Center Content</h1>
</div>
<div class="main2">
<h1>Right Content</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</body>
</html>

Result

A page is divide in to 12 columns.

Lets think we want to use to response grid view with 12 columns.

So width=100% / 12 columns = 8.33 %

One column is 8.33% of the whole page.

Then we make a class for each of the 12 columns.

Lets update the above example with this concept.

Example : Grid view columns

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.footer {
border: 1px solid blue;
}
.header {
border: 1px solid blue;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="column-"] {
float: left;
border: 1px solid blue;
}
.column-1 {width: 8.33%;}
.column-2 {width: 16.66%;}
.column-3 {width: 25%;}
.column-4 {width: 33.33%;}
.column-5 {width: 41.66%;}
.column-6 {width: 50%;}
.column-7 {width: 58.33%;}
.column-8 {width: 66.66%;}
.column-9 {width: 75%;}
.column-10 {width: 83.33%;}
.column-11 {width: 91.66%;}
.column-12 {width: 100%;}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="row">
<div class="column-3">
<h1>left content</h1>
</div>
<div class="column-6">
<h1>Center Content</h1>
</div>
<div class="column-3">
<h1>Right
Content</h1>
</div>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</body>
</html>

Result

« Previous Next »

C++ Tutorial	CSS Tutorial	C# Tutorial	PHP Tutorial
Java Tutorial	SQL Tutorial	JQuery Tutorial	MySQL Tutorial
HTML - Tutorial	Node.Js Tutorial	JavaScript Tutorial	Python Tutorial
MySQL Installation	Node.js Installation	XAMPP -- Installation	Python Installation
C++ - Environment Setup	Java - Environment Setup	C# - Environment Setup	Responsive Web Design

RWD - Grid View

RWD - Design

Syntax : box-sizing

Example : box-sizing

Result

Example : Grid view columns

Result