We start off with 4 columns using grid-template areas:

.body {
    display: grid;
    background-color: lightgrey;
    padding: 0.6em;
    gap: 0.6em;
    grid-template-columns: repeat(4, 4fr);
    grid-template-rows: max-content;
    grid-template-areas:
    "a a a a"
    "b c d e"
    "b f g h"
    "b i i i"
    "b j j j";
}

At 900px width we switch to three columns (note that grid-template-colums breaks into two rules here because of the small width of this container, in the css ofcourse it's all on 1 line):

@media only screen and (min-width: 641px) and (max-width: 900px) {
    .body {
        grid-template-columns: repeat(3, 4fr);
        grid-template-areas:
        "a a a"
        "b c d"
        "b e f"
        "b g h"
        "i i i"
        "j j j";
    }
}

At 640px width we switch to two columns (and lower the padding and gap a bit which is not really necessary):

@media only screen and (min-width: 401px) and (max-width: 640px) {
    .body {
    padding: 0.4em;
    gap: 0.4em;
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
        "a a"
        "b c"
        "b d"
        "b e"
        "b f"
        "b g";
        "b h";
        "i i";
        "j j";
    }
}

And at 400px width we switch to only one column:

@media only screen and (max-width: 400px) {
    .body {
    padding: 0.2em;
    gap: 0.2em;
        grid-template-columns: 1fr;
        grid-template-areas:
        "a"
        "b"
        "c"
        "d"
        "e"
        "f";
        "g";
        "h";
        "i";
        "j";
    }
}

Using grid-template-areas may look complicated at first but it gives you a clear presentation of how your page will look like.

Especially when the media-queries start kicking in you can see how much power and flexibility you have in designing the page:
you can add as many blocks as you like and give them whatever width and location you want, until it looks exactly like what you had in mind. Just play with the grid-areas a bit and you'll soon notice how easy it actually is.