<h1>Cards With In-line Blocks</h1>
<div class="wrapper">
<main>
<ul class="cards">
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
<li>Card</li>
</ul>
</main>
<aside>
<ul class="cards">
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
<li>Thumb</li>
</ul>
</div>
body {
max-width: 66em;
margin: 0 auto;
font-family: sans-serif;
}
h1 {
text-align: center;
}
.wrapper {
display: table;
}
.wrapper > * {
display: table-cell;
}
.cards {
list-style: none;
margin: 0.5em;
padding: 0.3em;
text-align: center;
background: #eee;
border-radius: 2em;
}
.cards li {
box-sizing: border-box;
width: 10em;
max-width: 100%;
min-height: 10em;
margin: 0.5em;
border-radius: 1em;
}
main .cards li {
background: #adf;
display: inline-block;
}
aside .cards li {
background: #afd;
}
@media screen and (max-width: 32em ){
.wrapper, .wrapper > * {
display: block;
}
aside .cards li {
display: inline-block;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.