Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<ul>
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
<!-- works with 2 less than real tiles -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
@import "compass/css3";
ul {
display: flex;
flex-wrap: wrap;
background-color: yellow;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
li {
flex: 1 0 12em;
box-shadow: -1px -1px 0 0 darken(yellow, 10%);
transition: all .3s;
div {
width: 8em;
height: 10em;
padding: 1em;
margin: 2em auto;
box-shadow: 0 0 0 1px inset;
background-color: deeppink;
}
// ghost tiles
// uncomment properties to make these invisible
&:empty {
// height: 0;
// box-shadow: none;
}
}
*,
:before,
:after {
box-sizing: border-box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment