Flexbox vs CSS Grid: Variable Widths on Each Row

Flexbox vs CSS Grid: Variable Widths on Each Row by Wes Bos

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/wesbos/css-grid/master/assets/style.css">
<div class="flex-container">
  <div class="item">Short</div>
  <div class="item">Longerrrrrrrrrrrrrr</div>
  <div class="item">💩</div>
  <div class="item">This is Many Words</div>
  <div class="item">Lorem, ipsum.</div>
  <div class="item">10</div>
  <div class="item">Snickers</div>
  <div class="item">Wes Is Cool</div>
  <div class="item">Short</div>
</div>

CSS

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container>* {
  flex: 1;
  margin: 10px;
}