<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item" id="Item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
        .container {
            width: 100%;
            height: 400px;

            background-color: aliceblue;
            border: skyblue solid 2px;
        }

        .item {
            background-color: skyblue;

            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            font-size: xx-large;
            color: white;

            text-align: center;
            padding: 10px;
        }

        .container {
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 10px;
            height: 300px;

            /* align-content: start; */
            /* align-content: end; */
            /* align-content: center; */
            /* align-content: space-between; */
            /* align-content: space-around; */
            /* align-content: space-evenly; */
            /* align-content: stretch; */

            /* align-items: start; */
            /* align-items: end; */
            /* align-items: center; */
            /* align-items: stretch; */
            /* align-items: baseline; */

            /* justify-content: start; */
            /* justify-content: end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
            /* justify-content: stretch; */

            /* justify-items: start; */
            /* justify-items: end; */
            /* justify-items: center; */
            /* justify-items: stretch; */

            /* place-content: center; */
            /* place-content: start; */
            /* place-content: end; */
            /* place-content: space-between; */
            /* place-content: space-around; */
            /* place-content: space-evenly; */
            /* place-content: baseline; */
            /* place-content: stretch; */

            place-items: start;
            /* place-items: end; */
            /* place-items: center; */
            /* place-items: stretch; */
            /* place-items: baseline; */
        }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.