<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{
    background-color: gainsboro;
    display:grid;
    border: 1.5px black solid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(200px, auto);
}

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

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

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

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.