body {
  margin: 0;
  padding: 0;
  color: white;
  font-size: 2rem;
  font-family: helvetica, arial;
  font-weight: 200;
  text-align: center;
}

.gridcontainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
}



.griditem1 {
  grid-column-start: 1;
  grid-column-end: -1; /* will always span to the last line; no matter how many columns there are!*/
  /* grid-column-end: 5; would work below 600px to make my div span all columns but not once I have added a column with a media query. I could adjust grid-column-end to 6 within the media query but it is far easier to use -1 */ 
  background-color: green;
  height: 200px;
  justify-contents: center;
  
  color: white;
  font-size: 2rem;
  font-family: helvetica, arial;
  font-weight: 200;
  text-align: center;
}

@media (min-width: 600px) {
  .gridcontainer {
  grid-template-columns: repeat(12, 1fr); /* I have added extra columns at larger screen sizes!! */
  }
}