How to move around the GRID's children that have dynamic size

Question

I'm building a responsive webpage. Im using Flexbox and Grid for most of my layouts. Mostly, everything works ok, but I've run into some complex layouts and i'm wondering if using Grid is the way to go.

Basically, my design starts with a simple layout.

<div class="grid">
    <div class="g-cover">COVER</div>
    <div class="g-heading">HEADING</div>
    <div class="g-details">DETAILS</div>
    <div class="g-media">MEDIA</div>
    <div class="g-comment">COMMENT</div>
</div>


.grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-gap: 40px;
}

That looks like this

So far so good. The problem is when I try to expand the page and move the grid's children around. I can't get it to work the way I want it... and im wondering if the Grid is the right tool for this.

For example, when I expand the page I want the Grid to look like this:

The grid's children height are dynamic, so sometimes it looks like this (notice the media is shorter):

Searching here, I've came up with this model that doesn't work...

@media screen and (min-width: 768px) {

    .g-cover {
        grid-area: cover;
    }

    .g-heading {
        grid-area: heading;
    }

    .g-details {
        grid-area: details;
    }

    .g-media {
        grid-area: media;
    }

    .g-comment {
        grid-area: comment;
    }

    .grid {
        grid-template-columns: 40% auto;
        grid-template-rows: auto;
        grid-template-areas:
        "cover heading"
        "cover media"
        "details media"
        ". comment"
    }
}

Am I going the wrong path? Is Grid the correct tool for what I'm trying to achieve. I just need guidance from the experts coz I've spent days trying to figure this one out.