<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Hello</title>
  </head>
  <body>
    <div class="outer">
      <div class="wrapper">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
        <div class="block">6</div>
        <!-- <div class="block">7</div>
        <div class="block">8</div>
        <div class="block">9</div>
        <div class="block">10</div>
        <div class="block">11</div> -->
      </div>
    </div>
  </body>
</html>

.outer {
  display: flex;
  justify-content: center;
  background: pink;
}
.wrapper {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, 280px);
  grid-gap: 10px;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}
.block {
  width: 280px;
  height: 100px;
  background: rgba(255, 255, 255, 0.7);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.