Skip to content

Instantly share code, notes, and snippets.

@shonenada
Created October 3, 2017 17:43
Show Gist options
  • Save shonenada/0de6aa290ea61b49b16810bf6cb43781 to your computer and use it in GitHub Desktop.
Save shonenada/0de6aa290ea61b49b16810bf6cb43781 to your computer and use it in GitHub Desktop.
/**
<Gallery>
<Photo for="img in images">
<img class="Photo-img" :src="img.url" />
</Photo>
</Gallery>
**/
.Gallery {
column-count: 5;
column-gap: 0;
}
.Photo {
break-inside: avoid;
box-sizing: border-box;
padding: 10px;
}
.Photo-img {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
height: auto;
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment