<html>
<head>
<title>
</title>
<style>
/*-- setting width of body to 100 % and max-width to 1200px --*/
body{
width: 100%;
max-width: 1200px;
margin:auto;
}
/*-- applying clear around row so that column of one content do nat overflow on other-- */
.row {
clear:both;
}
/*-- setting common property for column --*/
[class*='col-'] {
float: left;
min-height: 1px;
margin:5px;
background-color: #ffffff;
}
/*-- we are dividing whole row into 6 column and other different possibility . as 100/6 = 16.66% -- */
.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%; }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%; }
*{
box-sizing: border-box;
}
/*-- applying media query for responsive page --*/
@media all and (max-width:800px){
.col-1{ width: 33.33%; }
.col-2{ width: 50%; }
.col-3{ width: 83.33%; }
.col-4{ width: 100%; }
.col-5{ width: 100%; }
.col-6{ width: 100%; }
.row .col-2:last-of-type{
width: 100%;
}
.row .col-5 ~ .col-1{
width: 100%;
}
}
@media all and (max-width:650px){
.col-1{ width: 50%; }
.col-2{ width: 100%; }
.col-3{ width: 100%; }
.col-4{ width: 100%; }
.col-5{ width: 100%; }
.col-6{ width: 100%; }
}
</style>
</head>
<body>
<div class="row">
<div class="col-1"> col-1 </div>
<div class="col-1"> col-1 </div>
<div class="col-1"> col-1 </div>
<div class="col-1"> col-1 </div>
</div>
<div class="row">
<div class="col-1"> col-1 </div>
<div class="col-1"> col-4 </div>
</div>
<div class="row">
<div class="col-2"> col-2 </div>
<div class="col-2"> col-2 </div>
<div class="col-2"> col-2 </div>
</div>
<div class="row">
<div class="col-3"> col-3 </div>
<div class="col-3"> col-3 </div>
</div>
<div class="row">
<div class="col-4"> col-4 </div>
<div class="col-2"> col-2 </div>
</div>
<div class="row">
<div class="col-5"> col-5 </div>
<div class="col-1"> col-1 </div>
</div>
<div class="row">
<div class="col-6"> col-6 </div>
</div>
</body>
</html>
No comments:
Post a Comment