- “960” Grid provides a CSS framework for creating Responsive grid layout for web page.
- All the Layout Elements width are in percentage that makes it adjustable with all type of screen size.
- push-x and pull-x are two special classes provides the position of element in grid.
- Download Link :-
- “unsemantic-grid-responsive.css” is the framework file to include it in the web page.
- In this demo , “We will See How to create grids and use of push-x and pull-x in the layout”.
- “grid-container” is the parent class of the grid where we are going to divide the page layout.Lets divide the page in two horizontal columns.To divide the page in two equal columns the elements have ‘grid-50’ class.
The HTML file (unsemantic-grid-layout-demo.html) code,
<html>
<head>
<title>Unsemantic Responsive Grid Layout</title>
<link rel="stylesheet" type="text/css" href="unsemantic-grid-responsive.css">
<style>
div.content {
height:200px;
border:1px solid grey;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-50">
<div class="content">grid-50 Layout</div>
</div>
<div class="grid-50">
<div class="content">grid-50 Layout</div>
</div>
</div>
</body>
</html>
- In firebug console DOM inspection ,
- Each section is “50%” of total width.In My Firebug Layout view shows 580-202 dimension for each section.
- The output in browse looks,
- To demonstrate the use of push and pull class .Lets take an example.Initially we have created two column of 30% and 70%. Each column have two text content(Sandeep,Sangeeta) surrounded with “DIV.one” and “Div.two”.
<html>
<head>
<title>Unsemantic Responsive Grid Layout</title>
<link rel="stylesheet" type="text/css" href="unsemantic-grid-responsive.css">
<style>
div.content {
height:30px;
border:1px solid grey;
text-align: center;
vertical-align: middle;
color:white;
font-weight: bold;
}
.two {
background: Green;
}
.one {
background: Grey;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-30">
<div class="content one">SANDEEP</div>
</div>
<div class="grid-70">
<div class="content two">SANGEETA</div>
</div>
</div>
</body>
</html>
- Without using push pull class it renders in browser like,
- Push the Div.one to 30% . So this will move to 30% towards right.
- Pull 10% Div.two. It moves 10% towards left.This looks like,
