Basically I have extra space between my "div class="grid"" (space between the pictures). If you click on "seasonal" and "cups" in my snippet you will know exactly what I mean. I've tried to get rid of this extra space by adding things like "display:none; and clear:both;" on my ".hide" class in css and nothing works. I feel like the problem could be taken care of in js, but I'm not sure how to code it.
Ultimately I'm trying to design a gallery page that a user can sort through images by clicking on the different category items such as "cups" and "clothing and accessories" while keeping a pintrest type style to it because the images are all different sizes. And I'm almost there, but I have this unwanted space on the page.
$(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>