flexbox grid

HTML

<div class="container">
    <div class="grid">
        <div class="grid-item quarter">
            <div class="alpha">Taillin</div>
        </div>
        <div class="grid-item half">
         
        </div>
        <div class="grid-item quarter">
               <div class="alpha">c/f</div>
        </div>
        <div class="grid-item third">
            <div class="alpha">dfd</div>
        </div>
        <div class="grid-item third">
            <div class="beta">dfd</div>
        </div>
        <div class="grid-item third">
            <div class="beta">dfd</div>
        </div>
        <div class="grid-item eighth">
            <div class="beta">dfd</div>
        </div>
        <div class="grid-item eighth">
            <div class="beta">dfd</div>
        </div>
        <div class="grid-item eighth">
            <div class="beta">dfd</div>
        </div>
        <div class="grid-item quarter">
            <div class="beta">dfd</div>
        </div>
        <div class="grid-item quarter">
            <div class="beta">dfd</div>
        </div>
        <div class="grid-item eighth">
            <div class="beta">dfd</div>
        </div>
    </div>
</div>

SCSS

* {
    box-sizing : border-box;
}
.container {
    width : 60%;
    margin : auto;
    background : yellow;
    height : 900px;
}
.grid {
    display : flex;
    flex-wrap : wrap;
    margin-left : -10px;
    background : lightblue;
}
.grid-item {
    background : pink;
    margin-bottom : 10px;
    padding-left : 10px;
    display : flex;
}
.quarter {
    width : 25%;
}
.half {
    width : 50%;
}
.third {
    width : 33.3333%;
}
.eighth {
    width : 12.5%;
}

.alpha {
    background : red;
    width : 100%;
}
.beta {
    background : blue;
    width : 100%;
}