auto box increase

text boxes increase after adding one box plus

by santhosh lanka

HTML

<div class="mainDiv">
  <div class="eachDiv">
    <p>
      It is a long established fact that a reader will be distracted by the readable content of a page when 
    </p>
  </div>
  <div class="eachDiv">
    <p>
      It is a long established fact that a reader will be distracted by the readable content of a page when import { Router, UrlTree } from '@angular/router';
    </p>
  </div>
  <div class="eachDiv">
    <p>
      It is a long established fact that a reader will be distracted by the readable content of a page when 
    </p>
  </div>
  <div class="eachDiv">
    <p>
      It is a long established fact that a reader will be distracted by the readable content of a page when 
    </p>
  </div>
  <div class="eachDiv"> 
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
    </p>
  </div>

CSS

.mainDiv {
  width:600px;
  padding: 20px;
  background-color: #e3fafc;
  border: 1px solid #99e9f2;
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.eachDiv {
  background-color: #99e9f2;
  color: #fff;
  width:150px;
}