.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  grid-auto-rows: 200px;
}

div {
  background-color: hotpink; 
}

#first {
  background-color: yellow;  /* seems like this color overrides the div background-color of hotpink */
  /* grid-column: 1 / span 2;*/
  grid-column-start: 1; /* places the left edge of the grid item at the first vertical grid line, effectively making it occupy the leftmost available column space. This property can be combined with grid-column-end to define the total span of the grid item across multiple columns. For example, grid-column-start: 1; grid-column-end: 3; would make the item span from the first column line to the third column line, occupying the first two columns. */
  grid-column-end: span 2; /* This value indicates that the grid item should span across two column tracks, starting from its grid-column-start position. Instead of explicitly setting a specific grid line for the end, span defines the extent of the item. */
  /*grid-row: 2 / 4; */
  grid-row-start: 2; /* specifies a grid item's start position within the grid row, using a line, span, or nothing (automatic). */
  grid-row-end: 4;
}

#third {
  width: 100px;
  height: 100px;
  align-self: center; /* allows you to override the default alignment set by the align-items property on the container for a specific item. */
  /* align-self: end; */  /* puts the third div square at the bottom of the first row instead of center */
  /* align-self: start; */ /* puts third div square at the top */
  /* justify-self: start; */ /* used to align a single grid item within its grid cell along the inline (or main) axis to the start of that axis. */ 
  /* justify-self: center; */ /* puts the third div square in the middle of its 1fr section */ 
  justify-self: end; 
}

#fifth {
  background-color: cyan;
  grid-row: 3 / span 3; /* does the same thing as the grid-row-start and grid-row-end below */ 
  /* grid-row-start: 3;
  grid-row-end: span 3; */
}