auto-fill
  <div class="kapsayici kapsayici--fill">
    <div class="grid-ogesi">
      1
    </div>
    <div class="grid-ogesi">
      2
    </div>
    <div class="grid-ogesi">
      3
    </div>
    <div class="grid-ogesi">
      4
    </div>
    <div class="grid-ogesi">
      5
    </div>
    <div class="grid-ogesi">
      6
    </div>
    <div class="grid-ogesi">
      7
    </div>
  </div>

  <hr>

  auto-fit
  <div class="kapsayici kapsayici--fit">
    <div class="grid-ogesi">
      1
    </div>
    <div class="grid-ogesi">
      2
    </div>
    <div class="grid-ogesi">
      3
    </div>
    <div class="grid-ogesi">
      4
    </div>
    <div class="grid-ogesi">
      5
    </div>
    <div class="grid-ogesi">
      6
    </div>
    <div class="grid-ogesi">
      7
    </div>
  </div>
.kapsayici {
  display: grid;
  grid-gap: 5px;
  border: 5px solid #006c8e;
  background: #009cc1;
}

.kapsayici--fill {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.kapsayici--fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-ogesi {
  background: #ccebf3;
  padding: 20px;
}

body {
  padding: 2em;
}

hr {
  margin: 80px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.