<div class="container">
    <div class="item1">1</div>
    <div class="item2">
    <div class="nested"><p>I love dogs.</p></div>
    <div class="nested"><p>Ya I really do</p></div>
   <div class="nested"><p>Humans drool</p></div>
  </div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
  </div><!-- end of grid container -->

 @import url(https://fonts.googleapis.com/css?family=Poiret+One);
/* Body Styles*/

body {
    font-family: 'Poiret One', cursive;
    font-size: 1.5em;
}

/* inline-grid will set the grid display property for the chilren
1. Shorthand: grid-gap: 6px 10px;
*/

.container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-auto-rows: minmax(50,auto);
  border: 2px solid #f76707;
  border-radius: 5px;
  grid-column-gap: 20px;
 grid-row-gap: 20px;
}

.container > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #E6E6FA;
  padding: 1em;
  color: #d9480f;
  
}

.item2 > .nested {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: hotpink;
  padding: 1em;
  color: #d9480f;
  
}
.item1{
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

.item2{
 grid-column-start: 2; 
  grid-column-end: 3;
  grid-row-start: 1; 
  grid-row-end: 3; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  
}