GRID - DIV dentro de outra DIV

Estava tentando criar um leiaute com o formato GRID, mas me deparei com um problema. Não consigo colocar DIV dentro de uma DIV do leiaute do GRID.

Queria saber como faço isso. Abaixo segue exemplo onde no div "col2" queria colocar duas div, uma do lado da outra:

CSS

.gridcontainer {
 display: grid;
 justify-content: center;
 grid-template-columns: 1fr 3fr 3fr 3fr 1fr;
 grid-gap: 3px;
}

.gridcontainer > div { /text-align: center;/

 padding: 10px;
 /*font-size: 20px;*/
}
.esquerda {
 grid-row: 1 / 5;
}
.direita {
 grid-row: 1 / 5;
 grid-column: 5 / 5;
}
.principal {
 grid-column: 2 / 5;
 background-color: #ffffff;
 padding-left: 10px;
}

	HTML

<div class="gridcontainer">
 <div class="principal">
 <p>texto</p>
 </div>
 <div class="col1">
 <p>texto</p>
 </div>
 <div class="col2">
 <div class="esquerda">
 <img src="...">
 <p>Imagem legenda</p>
 </div>
 <div class="direita">
 <p>Texto</p>
 </div>
 </div>
</div>