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.