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

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>