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