CSS grid question - flow around an element

[maxxd]

Hey y'all. So, I've got a design I need to match and I'm having some issues. So far CSS grid is working exactly like I thought it would except for one small issue - I need the text in the content area to wrap under the image in the right area. It's not working using column/row assignment (I tried using shape-outside on the image; no love) so I tried grid-template-areas and grid-area. Still no love.

Visual reference: what I have currently-

 

 

And what I need:

 

Here's the CSS:

.container{
	display: grid;
	grid-template-columns: 115px 60px 200px 330px;
	grid-template-rows: repeat(6, 100px);
	grid-template-areas:
		". title title right"
		". stats stats right"
		". refs refs right"
		"head head cont right"
		"head head cont ."
		". . coda .";
}
.right{
	grid-area: right;
	background-color: blue;
}
.title{
	grid-area: title;
	background-color: yellow;
}
.stats{
	grid-area: stats;
	background-color: red;
}
.ref-container{
	grid-area: refs;
	background-color: green;
}
.headshot{
	grid-area: head;
	background-color: black;
	color: white;
}
.content{
	grid-area: cont;
	background-color: orange;
}
.coda{
	grid-area: coda;
	background-color: aqua;
}

And HTML:

<div class="container">
	<div class="right">RIGHT</div>
	<div class="title">TITLE</div>
	<div class="stats">STATS</div>
	<div class="ref-container">REF-CONTAINER</div>
	<div class="headshot">HEADSHOT</div>
	<div class="content">CONTENT</div>
	<div class="coda">CODA</div>
</div>

I tried using this:

grid-template-areas:
	". title title right"
	". stats stats right"
	". refs refs right"
	"head head cont right"
	"head head cont cont"
	". . coda .";

But apparently wrapping the cont area into a second column is invalid.

[requinix]

The template does one name per cell so you can't overlap things on their corners.

grid-area is shorthand for grid-row/column-start/end, so you could explicitly set the column-end to be "right". That'll stretch it out over that column, but text won't wrap and I don't know if there is a way to essentially "float" that right element.
So what you could do, given you know the size of the columns and rows (or do you?) is to create a floating div inside the content that positions where the overlapping right cell is.

https://jsfiddle.net/e1hg05af/

[maxxd]

In reality the heights of the rows can vary somewhat (the width of `right` is a known, so that'll absolutely work), but I think the content is consistent enough that I can estimate enough to make this work - thank you!

[maxxd]

BTW - that totally did the trick. Thanks much, @requinix!

[jodunno]

But a grid design isn't necessary to achieve such a layout. vide my screen cpture attached image. I don't know what you are creating but it is a messy design like going back to tables and pixel gifs. How do you suppose it will work on a phone? Even so, a grid is not necessary. I call it gridlock, LOL. we go back to caveman html days. I was a hard headed tables only layout coder until 2015 when i learned html5  and css3. I now see the light and i have become a better html coder. I hope you that you also drop the table mindset and create clean simple desins without grid. I also prefer much larger text and less data on pages. I see why Google looks so good compared to other sites: simplicity. A search box, logo, copyright and done.