<div class="container container--1">
  <div class="item">1</div>
  <div class="item">2</div>
</div>
<br>
<div class="container container--2">
  <div class="item">1</div>
  <div class="item">2</div>
</div>
/* -------- Skip this base code -------- */
* { box-sizing: border-box; } .container { display: grid; gap: 1px; position: relative; padding: 1px; border: 16px solid silver; color: white; background: royalblue; } .item { padding: 8px; background: coral; } .container::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; opacity: .75; } .container--1::after { content: 'auto-fill'; } .container--2::after { content: 'auto-fit'; }

.container--1 { 
  grid: auto / repeat(auto-fill, minmax(80px, auto)); 
}
.container--2 { 
  grid: auto / repeat(auto-fit, minmax(80px, auto)); 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.