<div class="wrapper">
        <div class="first-box">
            <h2>Box 1</h2>
        </div>

        <div class="second-box">
            <h2>Box 2</h2>
        </div>

        <div class="third-box">
            <h2>Box 3</h2>
        </div>

        <div class="fourth-box">
            <h2>Box 4</h2>
        </div>

        <div class="fifth-box">
            <h2>Box 5</h2>
        </div>

        <div class="sixth-box">
            <h2>Box 6</h2>
        </div>
.wrapper{
    display: grid;
    background-color: gainsboro;
    border: 1.5px solid black;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 1em;
}

.first-box {
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    background-color: orange;
    grid-column: 1/4;
    grid-row: 1/2;
}

.second-box {
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    background-color: darkorange;
    grid-column: 2/3;
    grid-row: 2/4;
    
}

.third-box {
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    background-color: coral;
}

.fourth-box {
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    background-color: tomato;
}

.fifth-box {
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    background-color: orangered;
}

.sixth-box {
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    background-color:orangered;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.