CSS Grid Sample auto-fill/auto-fit

画面幅を変更して確認してください。

auto-fill

item1

item2

item3

item4

item5

auto-fit

item1

item2

item3

item4

item5

HTML

<div id="auto-fill">
  <div class="container">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
  </div>
</div>

<div id="auto-fit">
  <div class="container">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
  </div>
</div>

CSS

#auto-fill .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: minmax(70px, auto);
}
#auto-fit .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: minmax(70px, auto);
}

.container > div {
  padding: 10px;
  background-color: #D5F9CC;
  border: 1px solid #CCC;
}

body {
  width: 90%;
  margin: 2em auto;
  max-width: 1400px;
}