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

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

<style>
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        grid-auto-rows: minmax(50px, auto);
    }
    @media (max-width: 767px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    .grid > div {
        border: 2px solid #b1e7f7;
        border-radius: 5px;
        background-color: rgba(177, 231, 247, 0.5);
        padding: 10px;
        color: #089dcb;
    }
    .n1 {
        grid-row-end: span 6;
    }
    .n2 {
        grid-row-end: span 4;
    }
    .n3 {
        grid-row-end: span 3;
    }
    .n4 {
        grid-row-end: span 2;
    }
    .n5 {
        grid-row-end: span 2;
    }
    .n6 {
        grid-row-end: span 1;
    }
</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>