Flexbox vs CSS Grid: Unknown Content Size

Flexbox vs CSS Grid: Unknown Content Size by Wes Bos

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/wesbos/css-grid/master/assets/style.css">
<div class="container known">
  <div class="item">Short</div>
  <div class="item">Longerrrrrr</div>
  <div class="item">
    <img src="https://source.unsplash.com/300x200" alt="">
  </div>
  <div class="item">💩</div>
</div>

CSS

.known {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  grid-gap: 20px;
  margin: 100px 0;
}