/**
* masonry
*
*
*
* @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});
}
}
}
}
}