Most efficient way to code a responsive 2 (50%) / 3 (33%) column CSS-grid layout?

Question

I'm currently trying to layout a fairly straightforward responsive image grid using CSS Grid (see image)

A static image of the CSS grid layout I'm attempting to create:

The first row will show two images (both at 50% width), the second row will display three images (at aprox 33% each).

I have no problems with this layout using Flexbox but a CSS Grid solution eludes me. For the record, I'm still getting to grips with CSS Grid so perhaps the problem lies with me? Is this layout possible? Any hints/tips would be much appreciated.

Answer 1

Here's an example. You can play with the units to fit your size requirements. Code here:

//HTML
<div class="gridcontainer">
    <div class="bigimage1"></div>
    <div class="bigimage2"></div>
    <div class="smallimage1"></div>
    <div class="smallimage2"></div>
    <div class="smallimage3"></div>
</div>

//CSS
.gridcontainer{
    background: #666;
    border: .65vw solid #666;
    display: grid;
    height: 81.75vh;
    width: 57.5vw;
    grid-gap: .7vw;
    grid-template-columns: 9vw 9vw 9vw 9vw 9vw 9vw;
    grid-template-rows: 48vh 32.5vh;
    grid-template-areas: 
    "bigimageleft bigimageleft bigimageleft bigimageright bigimageright bigimageright"
    "smallimageleft smallimageleft smallimagecenter smallimagecenter smallimageright smallimageright";
    }

.bigimage1{
    grid-area: bigimageleft;
    background: white;
    }
.bigimage2{
    grid-area: bigimageright;
    background: white;
    }
.smallimage1{
    grid-area: smallimageleft;
    background: white;
}
.smallimage2{
    grid-area: smallimagecenter;
    background: white;
}
.smallimage3{
    grid-area: smallimageright;
    background: white;
    }

Have a look at an example here: https://jsfiddle.net/L5gbfv7m/11/