CSS grid-auto-columns Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.example {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
}

.grid {
  display: grid;
  grid-auto-flow: column; /* place items in implicit columns */
  grid-template-columns: 140px 120px; /* two explicit columns */
  grid-auto-columns: 90px; /* size for any implicit columns */
  gap: 12px;
  align-items: center;
}

.item {
  background: linear-gradient(135deg, #67b26f, #4ca2cd);
  color: #fff;
  padding: 16px;
  text-align: center;
  border-radius: 8px;
  min-width: 0;
}
</style></head><body><div class="example">
  <h2>Grid auto-columns example</h2>
  <div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</div></body></html>