74 lines
1.7 KiB
SCSS
74 lines
1.7 KiB
SCSS
/*--------------------------------------------------
|
|
[Masonry Grid]
|
|
----------------------------------------------------*/
|
|
|
|
.masonry-grid {
|
|
position: relative;
|
|
@include clearfix;
|
|
margin: 0 -2px;
|
|
|
|
.masonry-grid-item {
|
|
display: block;
|
|
float: left;
|
|
vertical-align: top;
|
|
padding: 0 2px;
|
|
margin-bottom: 4px;
|
|
|
|
&.col-12 { width: 100%; }
|
|
&.col-11 { width: 91.66666667%; }
|
|
&.col-10 { width: 83.33333333%; }
|
|
&.col-9 { width: 75%; }
|
|
&.col-8 { width: 66.66666667%; }
|
|
&.col-7 { width: 58.33333333%; }
|
|
&.col-6 { width: 50%; }
|
|
&.col-5 { width: 41.66666667%; }
|
|
&.col-4 { width: 33.33333333%; }
|
|
&.col-3 { width: 25%; }
|
|
&.col-2 { width: 16.66666667%; }
|
|
&.col-1 { width: 8.33333333%; }
|
|
}
|
|
}
|
|
/* Media Queries below 768px */
|
|
@media (max-width: $screen-sm-min) {
|
|
.masonry-grid {
|
|
.masonry-grid-item {
|
|
width: 50%;
|
|
|
|
&.col-12,
|
|
&.col-11,
|
|
&.col-10,
|
|
&.col-9,
|
|
&.col-8,
|
|
&.col-7,
|
|
&.col-6,
|
|
&.col-5,
|
|
&.col-4,
|
|
&.col-3,
|
|
&.col-2,
|
|
&.col-1 { width: 50%; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Media Queries below 600px */
|
|
@media (max-width: 600px) {
|
|
.masonry-grid {
|
|
.masonry-grid-item {
|
|
width: 100%;
|
|
|
|
&.col-12,
|
|
&.col-11,
|
|
&.col-10,
|
|
&.col-9,
|
|
&.col-8,
|
|
&.col-7,
|
|
&.col-6,
|
|
&.col-5,
|
|
&.col-4,
|
|
&.col-3,
|
|
&.col-2,
|
|
&.col-1 { width: 100%; }
|
|
}
|
|
}
|
|
}
|