Responsive Grid

index.html

<div class="container grids">
  <header>
    <h1>Responsive Grid </h1>
    <p>A simple responsive grid system, mobile first design. Resize your browser to test the grids.</p>
  </header>
  <div class="row">
    <div class="col12">column 12</div>
  </div>
  <div class="row">
    <div class="col11">column 11</div>
    <div class="col1">column 1</div>
  </div>
  <div class="row">
    <div class="col10">column 10</div>
    <div class="col2">column 2</div>
  </div>
  <div class="row">
    <div class="col9">col 9</div>
    <div class="col3">col 3</div>
  </div>
  <div class="row">
    <div class="col8">col 8</div>
    <div class="col4">col 4</div>
  </div>
  <div class="row">
    <div class="col7">col 7</div>
    <div class="col5">col 5</div>
  </div>
  <div class="row">
    <div class="col6">col 6</div>
    <div class="col6">col 6</div>
  </div>
  <div class="row">
    <div class="col4">col 7</div>
    <div class="col4">col 5</div>
    <div class="col4">col 5</div>
  </div>
  <div class="row">
    <div class="col3">column 3</div>
    <div class="col3">column 3</div>
    <div class="col3">column 3</div>
    <div class="col3">column 3</div>
  </div>
  <div class="row">
    <div class="col2">column 2</div>
    <div class="col2">column 2</div>
    <div class="col2">column 2</div>
    <div class="col2">column 2</div>
    <div class="col2">column 2</div>
    <div class="col2">column 2</div>
  </div>
  <div class="row">
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
    <div class="col1">column 1</div>
  </div>
</div>

responsive-grid.markdown

Responsive Grid

A simple responsive grid system, mobile first. Resize your browser to test the grids.

A Pen by ssbalakumar on CodePen.

License.

script.js

/*

@ssbalakumar

Responsive Grid

A simple responsive grid system, mobile first. Resize your browser to test the grids.

*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,200italic,300italic,400italic,600italic,700italic);
/*  Box Sizing */
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/*-------------------Clearfix -------------------*/

.clearfix { *zoom: 1;
}

.clearfix:before, .clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}

.clearfix:after { clear: both; }

/*  2. Fluid Responsive Grid System	  */

.container {
	margin: 0px auto;
	padding: 0 20px;
	max-width: 1140px;
	width: 100%;
}

.grid-940.container { max-width:980px }

.grid-740.container { max-width:780px }

.grid-540.container { max-width:580px }

.row {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	clear:both;
}

.row .row {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0 -20px;
}
.row [class*="col"], .large-col4, .large-col8, .one_fifth {
 float: left;
 padding: 0 20px;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}

.row:before, .row:after {
	display: table;
	line-height: 0;
	content: "";
}

.row:after { clear: both; }

.row .col1 { width: 8.333%; }

.row .col2 { width: 16.667%; }

.row .col3 { width: 25%; }

.row .col4 { width: 33.333%; }

.row .col5 { width: 41.667%; }

.row .col6 { width: 50%; }

.row .col7 { width: 58.333%; }

.row .col8 { width: 66.667%; }

.row .col9 { width: 75%; }

.row .col10 { width: 83.333%; }

.row .col11 { width: 91.667%; }

.row .col12 { width: 100%; }

.row .colone_fifth { width: 20%; }

.row .large-col4 {
	position:relative;
	width:33.33333%
}

.row .large-col8 {
	position:relative;
	width:66.6667%;
}
 
/*  3. Media Queries */  
/*Large Desktops*/
 @media only screen and (min-width: 1600px) {
 .container {
 max-width:1320px !important;
}
}
 @media only screen and (min-width: 992px) and (max-width: 1199px) {
 .container {
 width:100% !important
}
 .row {
 margin-left: -10px;
 margin-right: -10px;
}
 .row [class*="col"] {
 padding-left: 10px;
 padding-right: 10px;
}
}
 @media only screen and (min-width: 768px) and (max-width: 991px) {
 .container {
 width:100% !important
}
 .row [class*="col"] {
 padding-left: 10px;
 padding-right: 10px;
}
}
 @media only screen and (min-width: 480px) and (max-width: 767px) {
 .container {
 width:100% !important;
}
 [class*="col"] {
 width: 100% !important;
}
}
 @media only screen and (min-width: 0px) and (max-width: 479px) {
 .container {
 width:100% !important;
 padding:0 5px !important;
}
 [class*="col"] {
 width: 100% !important;
 padding:0 5px;
}
}
@media only screen and (max-width: 241px) {
 .container {
 width:100% !important;
 padding:0 5px !important;
}
 [class*="col"] {
 width: 100% !important;
}
}

body {
	font-family: "Source Sans Pro", "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color:#999;
	background:#fff;
	width: 100%;
	font-weight: 400;
	letter-spacing: normal;
	-webkit-transition: margin-left 0.3s;
	transition: margin-left 0.3s;
	overflow-x: hidden;
	-webkit-font-smoothing: subpixel-antialiased !important;
	text-rendering: optimizelegibility;
}

a {
	color: #3498db;
	-webkit-transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
	text-decoration: none;
}

a:active, a:focus {
	text-decoration: none;
	outline: none!important;
}

a:hover {
	color: #3abcff;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	color: #999;
	margin: 0 0 20px;
	padding: 0;
	-webkit-font-smoothing: subpixel-antialiased!important;
	font-weight: 400;
	font-family: "Source Sans Pro", "Segoe UI", sans-serif;
	width: 100%;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { font-weight: 600; }

h4 a, h3 a, h2 a, h1 a, h5 a { color: #444 }

h1 {
	font-size: 24px;
	line-height: 115%;
	letter-spacing: 0px;
}

h2 {
	font-size: 22px;
	line-height: 125%;
	letter-spacing: 0px;
}

h3 {
	font-size: 18px;
	line-height: 125%;
}

h4 {
	font-size: 16px;
	letter-spacing: 0px;
	line-height: 25px;
	font-weight: 500;
}

h5 {
	font-size: 16px;
	letter-spacing: 0px;
	line-height: 24px;
	font-weight: 500;
}

h6 {
	font-size: 13px;
	line-height: 22px;
}

h2 + h5, h2 + h6 { margin: -8px 0 20px }

h1.textuppercase {
	letter-spacing: 2px;
	text-transform: uppercase;
}

h2.textuppercase { letter-spacing: 2px }

h3.textuppercase { letter-spacing: 2px }

h4.textuppercase, h5.textuppercase, h6.textuppercase { letter-spacing: 1px; }

h1 span {
	font-size:14px;
	font-weight:400
}

p {
	padding: 0;
	margin: 0 0 20px
}

p + p { margin: -8px 0 20px }

p.text-medium { font-size: 14px }

b { font-weight: 600; } 

ul li { list-style: none; }

/* Demo Grid Styling */
 .grids [class^=col] {
 color:#C30;
 margin-bottom:20px!important;
 text-align:center;
 background:#FCF;
 border: 1px solid #F69;
 font-size:14px;
 text-decoration:none;
 text-transform:capitalize;
 padding:10px 0;
}
header{
	padding-top:50px;
}