line-based placement

    .mygrid-container>div {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207, 232, 220);
    }

    .mygrid-container {
        font: 0.9em/1.2 Arial, Helvetica, sans-serif;
        display: grid;
        grid-template-columns: 1fr repeat(2, 1fr);
        grid-auto-rows: minmax(100px, auto);
        gap: 20px;
    }

    .mygrid-item:first-of-type {
        background-color: lightgoldenrodyellow;
        grid-column: 1 / 4;
    }

    .mygrid-item {
        display: grid;
        justify-content: center;
        align-items: center;
    }

    <div class="mygrid-container">
        <div class="mygrid-item">One</div>
        <div class="mygrid-item">Two</div>
        <div class="mygrid-item">Three</div>
        <div class="mygrid-item">Four</div>
        <div class="mygrid-item">Five</div>
        <div class="mygrid-item">Six</div>
        <div class="mygrid-item">Seven</div>
    </div>