cremeaux/assets/styles/css-masonry.sass

37 lines
686 B
Sass

.masonry
column-gap: 30px
column-fill: initial
@media only screen and (min-width: 1024px)
column-count: 4
@media only screen and (max-width: 1023px) and (min-width: 768px)
column-count: 3
@media only screen and (max-width: 767px) and (min-width: 540px)
column-count: 2
@media only screen and (max-width: 539px)
.brick
width: 100%
margin: 0 auto
text-align: center
img
margin: 0 auto .5rem
.item
background-color: #eee
display: inline-block
margin: 0 0 1em
width: 100%
.brick
margin-bottom: .5rem
display: inline-block
vertical-align: top
img
width: 100%
max-width: 300px
margin: 0 auto 1rem