How do I get rid of this unwanted space

Question

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> 

Answer 1

remove this from CSS, hope it helps:

Answer 2

Try adding width: 100% and box-sizing: border-box to the grid class.

However, I recommend using a proven, battle-tested solution for grids, like the bootstrap grid, or milligram.io, instead of implementing your own from scratch.

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

I tweaked a little bit your css, and used flexbox to set the grid. check it out and see if some of this is useful for you.

 $(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>