Самый эффективный способ кодирования адаптивного макета CSS-grid в 2 (50%) / 3 (33%) столбцах?

Question

В настоящее время я пытаюсь создать довольно простую адаптивную сетку изображений с помощью CSS Grid (см. Изображение)

Статическое изображение макета CSS-сетки, которое я пытаюсь создать:

В первом ряду будут показаны два изображения (оба с шириной 50%), во втором ряду будут показаны три изображения (примерно 33% каждого).

У меня нет проблем с этим макетом, использующим Flexbox, но решение CSS Grid ускользает от меня.Для справки, я все еще разбираюсь с CSS Grid, так что, возможно, проблема со мной?Возможен ли этот макет?Любые советы / подсказки будут высоко оценены.

Answer 1

Вот пример. Вы можете играть с единицами, чтобы соответствовать вашим требованиям к размеру. Код здесь:

//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;
    }

Посмотрите на пример здесь: https://jsfiddle.net/L5gbfv7m/11/