Isotope Centered set Column set Row

by Michael Patino

HTML

<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-cells-by-column/cells-by-column.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-cells-by-row/cells-by-row.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-fit-columns/fit-columns.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-horizontal/horizontal.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-masonry-horizontal/masonry-horizontal.js"></script>
<!-- PhotoViewContainer div -->
<div class="PhotoViewContainer">
<div class="PhotoViewContainer-GridSizer"></div>

<!-- painting-entry-wrapper div -->
<div class='painting-entry-wrapper'>
  <!-- painting-interior-wrapper div -->
  <div class='painting-interior-wrapper'>
    <!-- painting-frame div -->
    <div class='painting-frame' style="background: url('http://thepaintandpour.us/wp-content/uploads/2016/11/Fall-Colors-600x750.jpg') no-repeat top center; width: 300px; height: 375px; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-color: #999999;">
      <img src="http://thepaintandpour.us/wp-content/uploads/2016/11/Fall-Colors-600x750.jpg" style="width: 300px; height: 100%;visibility: hidden; z-index: -3333; top: 0; left: 0; "> 
      <!-- date div -->
  	  <div class='painting-date'>
  	   	<!-- date content -->
  	    <p class='painting-date-content'>
  	      <i class="fa fa-calendar" align="right"></i>&nbsp;Mon, Nov 22<br>
	    	  <i class="fa fa-clock-o"></i>&nbsp;7:00-9:00
	    	</p>
	    	<!-- end date content -->
	    </div>
	 	  <!-- end date div -->
	 	  <!-- class-type div -->
  	  <div class='painting-type-content'>
  	   	<p class='painting-type-content'>
  	     	<i class="fa fa-users"></i>&nbsp; Maturity&nbsp;&nbsp;
  	     </p>
    ...

CSS

.PhotoViewContainer { margin-top: 10px; margin-bottom: 10px; height: 100%; min-height: 100%; width: 100%; }

/* clear fix */ 
.PhotoViewContainer:after { content: ''; display: block; clear: both; }

.PhotoViewContainer-GridSizer { width: 100%; }
.painting-entry-wrapper { width:  300px; height:  480px; margin: 10px; }

@media (min-width: 300px) { 
    .PhotoViewContainer-GridSizer { width: 100%; }
    .PhotoViewContainer { width: 90%; margin-top: 10px; margin-bottom: 10px; margin-left: 5%; margin-right: 5%; } 
}
@media (min-width: 730px) { 
    .PhotoViewContainer-GridSizer { width: 50%; }
    .PhotoViewContainer { width: 90%; margin-top: 10px; margin-bottom: 10px; margin-left: 5%; margin-right: 5%; } 
}
@media (min-width: 1100px) { 
    .PhotoViewContainer-GridSizer { width: 33.3%; } 
}
@media (min-width: 1550px) { 
    .PhotoViewContainer-GridSizer { width: 25%; } 
}
@media (min-width: 2020px) { 
    .PhotoViewContainer-GridSizer { width: 20%; } 
}
.painting-entry-wrapper {
     height:  480px;
     width:  300px;
}
.painting-interior-wrapper {
     height:  auto;
     width:  300px;
}
div.painting-wrapper {
     width: 300px;
     height: auto;
     border-radius:  50px 10px 0px 0px;
     -moz-border-radius-topleft: 50px;
     -moz-border-radius-topright: 10px;
     -moz-border-radius-bottomright: 0px;
     -moz-border-radius-bottomleft: 0px;
}
div.painting-frame {
     float: left;
     position: relative;
     width: 300px;
     height: auto;
     top:  0;
     border-radius:  50px 10px 0px 0px;
     -moz-border-radius-topleft: 50px;
     -moz-border-radius-topright: 10px;
     -moz-border-radius-bottomright: 0px;
     -moz-border-radius-bottomleft: 0px;
}
div.painting-bottom {
     float: left;
     position: relative; /* important(so we can absolutely position the description div */ 
     height:  100px;
     width:  300px;
     top: -1px;
     background-color:  #EEEEEE;
     /* styling */ 
     font-size: 11px;
     border-radius:  0px 0px 50px 10px;
    ...

JavaScript

// external js:
// http://isotope.metafizzy.co/beta/isotope.pkgd.js

$( function() {
  $('.PhotoViewContainer').isotope({
    itemSelector: '.painting-entry-wrapper',
    layoutMode: 'cellsByRow',
    cellsByRow: {
      columnWidth: '.PhotoViewContainer-GridSizer'
    }
  });
});