.wrapper {
        display: grid;
        grid-template-columns: repeat(auto, 3);
        grid-auto-rows: minmax(100px, auto);
        column-gap: 1em;
        row-gap: 2em;
    }

    .grid-item {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightgoldenrodyellow;
    }

    @media screen and (min-width:600px) {
        
        .one {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        .two {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        .three {
            grid-column: 1 / 2;
            grid-row: 2/ 3;
        }

        .four {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        .five {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }

        .six {
            grid-column: 2/ 3;
            grid-row: 3 / 4;
        }

        .seven {
            grid-column: 1/ 2;
            grid-row: 4 / 5;
        }

        .eight {
            grid-column: 2 / 3;
            grid-row: 4 / 5;
        }

        .nine {
            grid-column: 1 / 3;
            grid-row: 5 / 6;
        }

        .grid-item {
            background-color: var(--primary-green);
            color: white;
        }
    }

    @media screen and (min-width:800px) {
        .one {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        .two {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        .three {
            grid-column: 3 / 4;
            grid-row: 1/ 2;
        }

        .four {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }

        .five {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        .six {
            grid-column: 3 / 4;
            grid-row: 2 / 3;
        }

        .seven {
            grid-column: 1/ 2;
            grid-row: 3 / 4;
        }

        .eight {
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }

        .nine {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }

        .grid-item {
            background-color: lightgray;
            color: black;
        }
    } 

    <div class="wrapper">
        <div class="grid-item one">One</div>
        <div class="grid-item two">Two</div>
        <div class="grid-item three">Three</div>
        <div class="grid-item four">Four</div>
        <div class="grid-item five">Fived</div>
        <div class="grid-item six">Six</div>
        <div class="grid-item seven">Seven</div>
        <div class="grid-item eight">Eight</div>
        <div class="grid-item nine">Nine</div>
    </div>