我如何摆脱这个多余的空间

Question

基本上，我的“ div class =“ grid”“（图片之间的空间）之间有多余的空间。如果您在我的摘要中单击“季节性”和“杯子”，您将确切地知道我的意思。我试图通过添加诸如“ display：none; and clear：both;”之类的东西来摆脱这些多余的空间。在我的CSS“ .hide”类中，没有任何效果。我觉得这个问题可以在js中解决，但是我不确定如何编写。

最终，我正在尝试设计一个画廊页面，用户可以通过单击不同的类别项（例如“杯子”和“衣服和配件”）来对图像进行排序，同时保留其最细致的字体样式，因为图像是所有不同的尺寸。而且我快到了，但是页面上有这个多余的空间。

$(document).ready(function(){
  $('.category_item').click(function(){
    var category = $(this).attr('id');
    
    if(category == 'all'){
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.grid').removeClass('hide');
      }, 300);
    } else {
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }
    
    if(category == 'all'){
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.gallery_item').removeClass('hide');
      }, 300);
    } else {
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }
    
  });	
});

/* Gallery */
#gallery_wrapper {
  width: 800px;
  margin: 12px 50px 12px 50px;
  background-color: #fff;
  text-align: center;
  border-radius: 12px;
}

#category {
  margin: 40px 0px 20px 0;
}

#category h2 {
  padding-top: 22px;
  margin-bottom: 12px;
}

#category h2 {
  display: grid;
  align-items: center;
  text-align: center;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  grid-gap: 20px;
}

#category h2::before {
  content: '';
  margin-left: 24px;
  border-top: 1px solid;
}

#category h2::after {
  content: '';
  margin-right: 24px;
  border-top: 1px solid;
}

#category ul li {
  display: inline;
  list-style-type: none;
}

.category_item {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin: 0 40px 0 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}			

.hide {
  transform: scale(0);
  width: 0;
  padding: 0;
  transition: all 250ms ease-in-out;
}

/* Gallery items (pictures, columns, etc.) */
#gallery_item_wrapper {
  width: 90%;
  max-width: 800px;
  min-width: 400px;
  margin: 50px auto;
}

#columns {
  padding: 0 15px 0 15px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
}

.grid {
  display: inline-block;
  background: #fefefe;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 0 2px 15px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(45deg, #fff, #f9f9f9);
  opacity: 1;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  transition: all 250ms ease;
}

.grid img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.grid p {
  font: 12px/18px Arial, Helvetica, "sans-serif";
  color: #333;
  margin: 0;
}

@media (min-width: 560px) {
	#columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;}
}

@media (min-width: 800px) {
	#columns {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<div id="category">
    <h2>Gallery</h2>
    <ul>
        <li class="category_item" id="all">All</li>
        <li class="category_item" id="cup">Cups</li>
        <li class="category_item" id="seasonal">Seasonal</li>
        <li class="category_item" id="clothing">Clothing and Accesories</li>
        <li class="category_item" id="misc">Misc</li>
    </ul>
</div>

<div class="gallery_item_wrapper">
    <div id="columns">
        <div class="grid cup">
            <img src="images/cups/cup1.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup2.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup seasonal">
            <img src="images/cups/cup3.jpg" class="gallery_item cup seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup4.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup5.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup6.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
						
        <div class="grid cup">
            <img src="images/cups/cup7.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup9.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup10.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup11.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup13.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup14.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup15.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup16.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup17.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup18.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup19.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup20.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup21.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup22.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup23.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup24.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a4.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a3.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a22.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a23.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a24.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
    </div>
</div>

Answer 1

从CSS删除此代码，希望对您有所帮助：

Answer 2

尝试将width: 100%和box-sizing: border-box添加到网格类。

但是，我建议使用经过验证的，经过战斗测试的网格解决方案，例如引导网格或milligram.io，而不是从头开始实现自己的解决方案。

Answer 3

$(document).ready(function(){
  $('.category_item').click(function(){
    var category = $(this).attr('id');
    
    if(category == 'all'){
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.grid').removeClass('hide');
      }, 300);
    } else {
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }
    
    if(category == 'all'){
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.gallery_item').removeClass('hide');
      }, 300);
    } else {
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }
    
  });	
});

/* Gallery */
#gallery_wrapper {
  width: 800px;
  margin: 12px 50px 12px 50px;
  background-color: #fff;
  text-align: center;
  border-radius: 12px;
}

#category {
  margin: 40px 0px 20px 0;
}

#category h2 {
  padding-top: 22px;
  margin-bottom: 12px;
}

#category h2 {
  display: grid;
  align-items: center;
  text-align: center;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  grid-gap: 20px;
}

#category h2::before {
  content: '';
  margin-left: 24px;
  border-top: 1px solid;
}

#category h2::after {
  content: '';
  margin-right: 24px;
  border-top: 1px solid;
}

#category ul li {
  display: inline;
  list-style-type: none;
}

.category_item {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin: 0 40px 0 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}			

.hide {
  transform: scale(0);
  width: 0;
  padding: 0;
  transition: all 250ms ease-in-out;
}

/* Gallery items (pictures, columns, etc.) */
#gallery_item_wrapper {
  width: 90%;
  max-width: 800px;
  min-width: 400px;
  margin: 50px auto;
}

#columns {
  padding: 0 15px 0 15px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
}

.grid {
  display: inline-block;
  background: #fefefe;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 0 2px 15px;
width: 100%;
box-sizing: border-box; 
column-width: 100px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(45deg, #fff, #f9f9f9);
  opacity: 1;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  transition: all 250ms ease;
}

.grid img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.grid p {
  font: 12px/18px Arial, Helvetica, "sans-serif";
  color: #333;
  margin: 0;
}

@media (min-width: 560px) {
	#columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;}
}

@media (min-width: 800px) {
	#columns {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<div id="category">
    <h2>Gallery</h2>
    <ul>
        <li class="category_item" id="all">All</li>
        <li class="category_item" id="cup">Cups</li>
        <li class="category_item" id="seasonal">Seasonal</li>
        <li class="category_item" id="clothing">Clothing and Accesories</li>
        <li class="category_item" id="misc">Misc</li>
    </ul>
</div>

<div class="gallery_item_wrapper">
    <div id="columns">
        <div class="grid cup">
            <img src="images/cups/cup1.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup2.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup seasonal">
            <img src="images/cups/cup3.jpg" class="gallery_item cup seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup4.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup5.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup6.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
						
        <div class="grid cup">
            <img src="images/cups/cup7.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup9.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup10.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup11.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup13.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup14.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup15.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup16.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup17.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup18.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup19.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup20.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup21.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup22.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup23.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup24.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a4.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a3.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a22.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a23.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a24.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
    </div>
</div>

Answer 4

我稍微调整了一下CSS，并使用flexbox设置了网格。检查一下，看看其中一些对您是否有用。

$(document).ready(function() {
  $('.category_item').click(function() {
    var category = $(this).attr('id');

    if (category == 'all') {
      $('.grid').removeClass('hide');
    } else {
      $('.grid').addClass('hide');
      $('.' + category).removeClass('hide');
    }

  });
});

/* Gallery */

#gallery_wrapper {
  width: 800px;
  margin: 12px 50px 12px 50px;
  background-color: #fff;
  text-align: center;
  border-radius: 12px;
}

#category {
  margin: 40px 0px 20px 0;
}

#category h2 {
  padding-top: 22px;
  margin-bottom: 12px;
}

#category h2 {
  display: grid;
  align-items: center;
  text-align: center;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  grid-gap: 20px;
}

#category h2::before {
  content: '';
  margin-left: 24px;
  border-top: 1px solid;
}

#category h2::after {
  content: '';
  margin-right: 24px;
  border-top: 1px solid;
}

#category ul li {
  display: inline;
  list-style-type: none;
}

.category_item {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin: 0 40px 0 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}


/* Gallery items (pictures, columns, etc.) */

#gallery_item_wrapper {
  width: 90%;
  max-width: 800px;
  min-width: 400px;
  margin: 50px auto;
}

#columns {
  width: 100%;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.grid {
  background: #fefefe;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  box-sizing: border-box;
  padding: 15px 15px 5px;
  background: -webkit-linear-gradient(45deg, #fff, #f9f9f9);
  transition: all 250ms ease-in-out;
  overflow: hidden;
  width: calc(50% - 20px);
  border: 1px solid navy;
  margin: 10px;
  transform-origin: 50% 50%;
  min-height: 100px;
}

.grid.hide {
  transform: scale(0);
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.grid img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.grid p {
  font: 12px/18px Arial, Helvetica, "sans-serif";
  color: #333;
  margin: 0;
}

@media (min-width: 560px) {
  .grid {
    width: calc(33% - 30px);   
  }
}

@media (min-width: 800px) {
  .grid {
    width: calc(25% - 40px);   
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<div id="category">
  <h2>Gallery</h2>
  <ul>
    <li class="category_item" id="all">All</li>
    <li class="category_item" id="cup">Cups</li>
    <li class="category_item" id="seasonal">Seasonal</li>
    <li class="category_item" id="clothing">Clothing and Accesories</li>
    <li class="category_item" id="misc">Misc</li>
  </ul>
</div>

<div class="gallery_item_wrapper">
  <div id="columns">
    <div class="grid cup">
      <img src="images/cups/cup1.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup2.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup seasonal">
      <img src="images/cups/cup3.jpg" class="gallery_item cup seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup4.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup5.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup6.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup7.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup9.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup10.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup11.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup13.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup14.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup15.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup16.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup17.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup18.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup19.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup20.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup21.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup22.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup23.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup24.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a4.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a3.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a22.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a23.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a24.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>
  </div>
</div>

$(document).ready(function(){
  $('.category_item').click(function(){
    var category = $(this).attr('id');
    
    if(category == 'all'){
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.grid').removeClass('hide');
      }, 300);
    } else {
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }
    
    if(category == 'all'){
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.gallery_item').removeClass('hide');
      }, 300);
    } else {
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }
    
  });	
});

/* Gallery */
#gallery_wrapper {
  width: 800px;
  margin: 12px 50px 12px 50px;
  background-color: #fff;
  text-align: center;
  border-radius: 12px;
}

#category {
  margin: 40px 0px 20px 0;
}

#category h2 {
  padding-top: 22px;
  margin-bottom: 12px;
}

#category h2 {
  display: grid;
  align-items: center;
  text-align: center;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  grid-gap: 20px;
}

#category h2::before {
  content: '';
  margin-left: 24px;
  border-top: 1px solid;
}

#category h2::after {
  content: '';
  margin-right: 24px;
  border-top: 1px solid;
}

#category ul li {
  display: inline;
  list-style-type: none;
}

.category_item {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin: 0 40px 0 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}			

.hide {
  transform: scale(0);
  width: 0;
  padding: 0;
  transition: all 250ms ease-in-out;
}

/* Gallery items (pictures, columns, etc.) */
#gallery_item_wrapper {
  width: 90%;
  max-width: 800px;
  min-width: 400px;
  margin: 50px auto;
}

#columns {
  padding: 0 15px 0 15px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
}

.grid {
  display: inline-block;
  background: #fefefe;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 0 2px 15px;
width: 100%;
box-sizing: border-box; 
column-width: 100px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(45deg, #fff, #f9f9f9);
  opacity: 1;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  transition: all 250ms ease;
}

.grid img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.grid p {
  font: 12px/18px Arial, Helvetica, "sans-serif";
  color: #333;
  margin: 0;
}

@media (min-width: 560px) {
	#columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;}
}

@media (min-width: 800px) {
	#columns {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<div id="category">
    <h2>Gallery</h2>
    <ul>
        <li class="category_item" id="all">All</li>
        <li class="category_item" id="cup">Cups</li>
        <li class="category_item" id="seasonal">Seasonal</li>
        <li class="category_item" id="clothing">Clothing and Accesories</li>
        <li class="category_item" id="misc">Misc</li>
    </ul>
</div>

<div class="gallery_item_wrapper">
    <div id="columns">
        <div class="grid cup">
            <img src="images/cups/cup1.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup2.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup seasonal">
            <img src="images/cups/cup3.jpg" class="gallery_item cup seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup4.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup5.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup6.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
						
        <div class="grid cup">
            <img src="images/cups/cup7.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup9.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup10.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup11.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup13.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup14.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup15.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup16.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup17.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup18.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup19.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup20.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup21.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup22.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup23.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid cup">
            <img src="images/cups/cup24.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a4.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a3.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a22.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a23.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
        
        <div class="grid seasonal">
            <img src="images/items/a24.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
    </div>
</div>