Flexbox vs CSS Grid: Flex on Item

Flexbox vs CSS Grid: Flex on Item by Wes Bos

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/wesbos/css-grid/master/assets/style.css">
<div class="controls">
  <button>⏯️</button>
  <button>🐢</button>
  <button>🐰</button>
  <div class="scrubber"></div>
  <button>💬</button>
  <button>🔽</button>
</div>

CSS

.controls {
  margin: 200px 0;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto;
}
.scrubber {
  background: #BADA55;
  height: 10px;
  min-width: 100px;
  border-radius: 10px;
  /* flex: 1; */
}
.controls {
  /* display: flex; */
  align-items: center;
}