You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
992 B
50 lines
992 B
/**
|
|
* masonry
|
|
*
|
|
* <div class="masonry">
|
|
* <div class="mansonry__iten">
|
|
*
|
|
* </div>
|
|
* </div>
|
|
*
|
|
* @author Björn Hase, Tentakelfabrik
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://github.com/tentakelfabrik/crispy-css
|
|
*
|
|
*/
|
|
|
|
$masonry_sizes: (
|
|
1: 25%,
|
|
2: 55%,
|
|
3: 20%,
|
|
4: 67%,
|
|
5: 33%
|
|
) !default;
|
|
|
|
$masonry_height: 200px !default;
|
|
$masonry_height--sm: 300px !default;
|
|
$masonry_gap: 15px !default;
|
|
$masonry_gap-offset: 10px !default;
|
|
|
|
.masonry {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-flow: row wrap;
|
|
gap: $masonry_gap;
|
|
|
|
&__item {
|
|
width: 100%;
|
|
height: $masonry_height;
|
|
|
|
@include media-sm() {
|
|
height: $masonry_height--sm;
|
|
|
|
// add width from data
|
|
@each $index, $size in $masonry_sizes {
|
|
&:nth-child(4n+#{$index}) {
|
|
width: calc(#{$size} - #{$masonry_gap-offset});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |