<div class="container">
<ul class="feed">
<li><div class="card">Card 1</div></li>
<li><div class="card">Card 2</div></li>
<li><div class="card">Card 3</div></li>
<li><div class="card">Card 4</div></li>
<li><div class="card">Card 5</div></li>
<li class="nested">
<ul>
<li><div class="card">Card A</div></li>
<li><div class="card">Card B</div></li>
<li><div class="card">Card C</div></li>
</ul>
</li>
<li><div class="card">Card 6</div></li>
<li><div class="card">Card 7</div></li>
<li><div class="card">Card 8</div></li>
<li><div class="card">Card 9</div></li>
<li><div class="card">Card 10</div></li>
</ul>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
background-color: grey;
}
ul {
margin: 0;
padding: 0;
list-style: none outside none;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.card {
background-color: #fff;
padding: 10px;
margin: 10px;
min-height: 300px;
}
.feed {
display: flex;
flex-wrap: wrap;
li {
flex: 1 0 50%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.