<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;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.