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.
plain-ui/src/scss/layouts/_masonry.scss

50 lines
1004 B

/**
* masonry
*
* <div class="masonry">
* <div class="mansonry__iten">
*
* </div>
* </div>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
$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});
}
}
}
}
}