Вёрстка контейнера с элементами разной ширины и высоты

.gridbox
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: "one four six""one five seven""two two eight""three three eight";
    gap: 5px;
    height: 90vh;
    width: 50vw;
}
.item 
{
    background-color: black;
    color: white
}
.one
{
    grid-area: one;
}
.two
{
    grid-area: two;
}
.three
{
    grid-area: three;
}
.four
{
    grid-area: four;
}
.five
{
    grid-area: five;
}
.six
{
    grid-area: six;
}
.seven
{
    grid-area: seven;
}
.eight
{
    grid-area: eight;
}

<div class="gridbox">
        <div class="item one">1</div>
        <div class="item two">2</div>
        <div class="item three">3</div>
        <div class="item four">4</div>
        <div class="item five">5</div>
        <div class="item six">6</div>
        <div class="item seven">7</div>
        <div class="item eight">8</div>
</div>