<div class="container">
    <div class="item1">1</div>
    <div class="item2">2
      <h1>I love dogs</h1>
        <h2>Ya man I really do</h1>
  </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: 3px solid hotpink;
 background-color: #E6E6FA;
}