Skip to content

Instantly share code, notes, and snippets.

@premregmi
Last active January 22, 2016 00:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save premregmi/5eb0ddab04f3b4bc1071 to your computer and use it in GitHub Desktop.
Save premregmi/5eb0ddab04f3b4bc1071 to your computer and use it in GitHub Desktop.
WordPress Ready Responsive Masonry Gallery Developed by Prem Regmi for Next Bootstrap. http://www.nextbootstrap.com/2016/01/wordpress-ready-responsive-masonry.html
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em;
display: block;
-webkit-column-gap: 2.25rem;
-moz-column-gap: 2.25rem;
column-gap: 12.25rem;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery.gallery-columns-5{
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
@media(max-width: 1170px){
.gallery.gallery-columns-5{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
/*-4 columns------*/
.gallery.gallery-columns-4{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
/*-3 columns------*/
.gallery.gallery-columns-3{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
/*-2 columns------*/
.gallery.gallery-columns-2{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
/*-1 columns------*/
.gallery.gallery-columns-1{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
/*--------Responsive---------*/
@media(max-width: 991px){
.gallery.gallery-columns-4,
.gallery.gallery-columns-5{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
@media(max-width: 767px){
.gallery.gallery-columns-4,
.gallery.gallery-columns-5,
.gallery.gallery-columns-3{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media(max-width: 540px){
.gallery.gallery-columns-4,
.gallery.gallery-columns-5,
.gallery.gallery-columns-3,
.gallery.gallery-columns-2{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
.gallery .gallery-item{
display: inline-block !important;
width: 100% !important;
max-width: 100% !important;
position: relative;
display: block;
padding: 3px;
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: .25rem;
float: none !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-bottom: 2.25rem !important;
}
/*===== End of Gallery Page ======*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment