<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;
}
This Pen doesn't use any external JavaScript resources.