.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-columns: 1fr 1fr 1fr;*/
  /*grid-template-columns: 1fr 50px 1fr 1fr;*/  /*first div will take up 1 fraction of the available space, second will take up 50px fixed, third will be 1 fraction, fourth will be 1 fraction */
  /*grid-template-columns: 400px 400px 400px;*/ /* fixed size */
  
  grid-gap: 15px; /* sets gaps between rows and columns */
  
  /*grid-template-rows: 200px 200px 200px; /* 3 values defines 3 rows and each of these rows will have a fixed height of 200px */
  grid-auto-rows: 100px; /* controls the size of the rows. This property specifically controls the size of rows that are automatically generated by the grid layout. These "implicit" rows are created when there are more grid items than explicitly defined rows in grid-template-rows */
}

div {
  background-color: hotpink;
}