<div class="container">
    <div class="item1">1</div>
    <div class="item2">
      <h1> 2 I love dogs</h1>
        <h2>Ya man I really do</h1>
    <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;
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 1; 
  grid-row-end: 3; 

 grid-column-start: 2; 
  grid-column-end: 3;
  grid-row-start: 1; 
  grid-row-end: 3; 

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.