Adaptive grid layout (adjust min and max width, and elements per row)

adaptive-grid-layout.html

<!-- behaviour example (gif) :https://cdn-images-1.medium.com/max/800/1%2A1FOrkyNbaabo3_LJxcdDbg.gif -->
<style>
.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);  
}
</style>
<div class="container">  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>  
</div>