<ul class="container">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 is a longer item</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

.container {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.container li {
  flex: auto;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  border-radius: 0.5em;
  padding: 0.5em;
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.