A Pen by Oreo3.

Flexible-Responsive-Grid-Block-Rayout-(3-4-5-column,-IE7-8-ok).markdown

Flexible Responsive Grid Block Rayout (3/4/5 column, IE7/8 ok)

• Break point : 480px
• Modern Browser & IE7/8 O.K. (Use selectivizr 1.0.3)
• 3,4,5 column
• You can use list tags instead of div tags

A Pen by Oreo3 on CodePen.

License.

index.html

<h2>Image & Text, 3colomn</h2>
<div class="grid_block cells3">
  <div class="grid_block_inner">

  	<div class="cell">
  	  <p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p>
  	  <div class="text_area">
  		  <h1>header(h1)</h1>
  		  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text(p)</p>
  	  </div>
  	</div>

  	<div class="cell">
  	  <p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p>
  	  <div class="text_area">
  		  <h1>header(h1)</h1>
  		  <p>ever since the 1500s, when an unknown printer took a galley of type(p)</p>
  	  </div>
  	</div>

  	<div class="cell">
  	  <p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p>
  	  <div class="text_area">
  		  <h1>header(h1)</h1>
  		  <p>ever since the 1500s, when an unknown printer took a galley of type(p)</p>
  	  </div>
  	</div>

  	<div class="cell">
  	  <p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p>
  	  <div class="text_area">
  		  <h1>header(h1)</h1>
  		  <p>ever since the 1500s, when an unknown printer took a galley of type(p)</p>
  	  </div>
  	</div>

  	<div class="cell">
  	  <p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p>
  	  <div class="text_area">
  		  <h1>header(h1)</h1>
  		  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's(p)</p>
  	  </div>
  	</div>

  </div>
</div>



<h2>Text only, 4colomn</h2>
<div class="grid_block cells4">
  <div class="grid_block_inner">

  	<div class="cell">
  		  <h1>header(h1)</h1>
  		  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum(p)</p>
  	</div>

  	<div class="cell">
  		  <h1>header(h1)</h1>
  		  <p>ever since the 1500s, when an unknown(p)</p>
  	</div>

  	<div class="cell">
  		  <h1>header(h1)</h1>
  		  <p>ever since the 1500s, when an unknown(p)</p>
  	</div>

  	<div class="cell">
  		  <h1>header(h1)</h1>
  		  <p>ever since the 1500s, when an unknown(p)</p>
  	</div>

  </div>
</div>


<!-- Use selectivizr 1.0.3 -->
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

script.js

/* Equal Height Blocks in Rows by CHRIS COYIER(CSS Tricks)
http://css-tricks.com/equal-height-blocks-in-rows/
http://codepen.io/micahgodbolt/full/FgqLc
It's been modified into a function called at page load and then each time the page is resized.
One large modification was to remove the set height before each new calculation. */
equalheight = function(container) {

  var currentTallest = 0,
    currentRowStart = 0,
    rowDivs = new Array(),
    $el,
    topPosition = 0;

  $(container).each(function() {

    $el = $(this);
    $($el).height('auto'); // added
    topPostion = $el.position().top;

    if (currentRowStart != topPostion) {

      // we just came to a new row.  Set all the heights on the completed row
      for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
        rowDivs[currentDiv].height(currentTallest);
      }

      // set the variables for the new row
      rowDivs.length = 0; // empty the array
      currentRowStart = topPostion;
      currentTallest = $el.height();
      rowDivs.push($el);
    }
    else {
      // another div on the current row.  Add it to the list and check if it's taller
      rowDivs.push($el);
      currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
    }
    // do the last row
    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
      rowDivs[currentDiv].height(currentTallest);
    }
  });
}

// excute when the page is roaded/resized
$(window).load(function() {
  if($('body').width() >= 481){
    equalheight('.grid_block .cell');
  }
});
$(window).resize(function() {
  if($('body').width() >= 481){
    equalheight('.grid_block .cell');
  }
});

style.css

img {
  max-width: 100% !important;
  height: auto !important;
  width: auto\9;/*IE6-8 but and 9.. :(*/
}
.grid_block {}
.grid_block .cell {
  margin-top: 0;
  margin-bottom: 20px;
  outline: 1px dotted green;/*text*/
  /*padding: 15px 1.5%;//if you want to make margin in each cell, Set padding and subtract (this value x 2 %) from cell width*/
}
.grid_block.float_img .cell h1 {
  word-break: break-all !important;/*not working.. :(*/
}
.grid_block h1 {
  margin-bottom: 0.5em;
  color: #842535;
}
.grid_block.float_img .cell img {
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
  vertical-align: bottom;
}
.grid_block li.cell {
  padding-left: 0;
  list-style: none;
}
/*When using SCSS or LESS, Use Inheritance of clearfix*/
.grid_block,
.grid_block .cell {
  zoom: 1;
}
.grid_block:after,
.grid_block .cell:after {
  content: "";
  display: block;
  clear: both;
}
.grid_block .cell p.img_area {
	margin-top: 0;
}

@media only screen and (max-width: 480px) {
  .grid_block .cell {
    clear: left;
  }
  .grid_block .cell .img_area {
  	float: left;
  	max-width: 40% !important;
  	margin-right: 20px;
  }
  .grid_block .cell .text_area {
    overflow: hidden;
    _zoom: 1;_height: 1%;/*IE6*/
  }
}

@media only screen and (min-width: 481px) {
	.grid_block .cell {
    float: left;
    margin-left: 3%;
	}
  .grid_block .cell .img_area {
  	text-align: center;
  }
	.grid_block.cells2 .cell {width: 48.5%;         width: 48%\9;/*IE6-8 but and 9..*/}
	.grid_block.cells3 .cell {width: 31.333333333%; width: 31%\9;}
	.grid_block.cells4 .cell {width: 22.75%;        width: 21%\9;}

	.grid_block.cells2 .cell:nth-child(2n+1),
	.grid_block.cells3 .cell:nth-child(3n+1),
	.grid_block.cells4 .cell:nth-child(4n+1) {
  	/* clear: left; */
  	margin-left: 0;
}