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/layout/_masonry.scss

37 lines
855 B

/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
*
*/
@mixin plain-ui__layout__masonry()
{
.masonry {
display: flex;
flex-flow: column wrap;
align-content: space-between;
&__item {
width: 32%;
margin-bottom: 2%; /* Optional */
}
/* Re-order items into 3 rows */
&__item:nth-child(3n+1) { order: 1; }
&__item:nth-child(3n+2) { order: 2; }
&__item:nth-child(3n) { order: 3; }
/* Force new columns */
&:before,
&:after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
}
}