A Pen by Francesco Improta.

Fluid-Grid.markdown

Fluid Grid

Responsive, filterable grid using Masonry and CSS transitions. Click on an item to make it expand.

http://masonry.desandro.com/

Forked from Sean McCaffery's Pen Fluid Grid.

A Pen by Francesco Improta on CodePen.

License.

index.html

<section class="grid-container">
  <div class="grid">
    <a href="#"><div class="item "><p class="title">News</p></div></a>
    <a href="#"><div class="item itall"><p class="title">Tall News</p></div></a>
    <a href="#"><div class="item "><p class="title">News</p></div></a>
    <a href="#"><div class="item "><p class="title">News</p></div></a>
    <a href="#"><div class="item"><p class="title">News</p></div></a>
    <a href="#"><div class="item "><p class="title">News</p></div></a>
    <a href="#"><div class="item "><p class="title">News</p></div></a>
    <a href="#"><div class="item"><p class="title">News</p></div></a>
    <a href="#"><div class="item irep"><p class="title">Reportage News</p></div></a>
    <a href="#"><div class="item"><p class="title">News</p></div></a>
    <a href="#"><div class="item"><p class="title">News</p></div></a>
    <a href="#"><div class="item"><p class="title">News</p></div></a>
    <a href="#"><div class="item"><p class="title">News</p></div></a>
    <a href="#"><div class="item"><p class="title">News</p></div></a>

  </div>
</section>

script.js

jQuery(document).ready(function ($) {
  
  var $container = $('.grid').masonry({
    columnWidth: 280,
    itemSelector: '.item',
    isFitWidth: true
  });
    
});

style.css

html, body {
  background: #333;
  font-family: Helvetica;
}

.grid-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.toggle {
  text-align: center;
  padding: 0;
  color: white;
}

.toggle li {
  display: inline;
  padding: 0 60px;
}

.toggle label {
  font-size: 1.2em;
  padding: 0 10px;
}

.grid {
  margin: 0 auto;
}

.item {
  color: white;
  display: table;
  font-size: 1.4em;
  text-align: center;
  margin: 5px;
  width: 270px;
  background: #2ecc71;
  height: 280px;
}

.item:hover .title {
  opacity: 1;
}

.title {
  display: table-cell;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}

.itall {
  background: #e74c3c;
  height: 570px;
}

.irep {
  background: blue;
  height: 570px;
  width: 550px;
}

.expand {
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  -webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  height: 100%;
  width: 100%;
  left: 0 !important;
  top: 0 !important;
  z-index: 99;
  text-indent: -9999px;
}