Грид-разметка CSS. Свойства grid-column и grid-row

Исходный код этого примера:

<style>
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        grid-auto-rows: minmax(50px, auto);
    }
    .grid > div {
        border: 2px solid #b1e7f7;
        border-radius: 5px;
        background-color: rgba(177, 231, 247, 0.5);
        padding: 10px;
        color: #089dcb;
    }
    .n1 {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .n2 {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
    }
    .n3 {
        grid-column: 1;
        grid-row: 2 / 5;
    }
    .n4 {
        grid-column: 3;
        grid-row: 3;
    }
    .n5 {
        grid-column: 2;
        grid-row: 4;
    }
    .n6 {
        grid-column: 3;
        grid-row: 4;
    }
</style>
<div class="grid">
    <div class="n1">1</div>
    <div class="n2">2</div>
    <div class="n3">3</div>
    <div class="n4">4</div>
    <div class="n5">5</div>
    <div class="n6">6</div>
</div>