main{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(10rem, auto);
    grid-gap: 1rem;
}

/* MOBILE */

.col-1 {
    grid-column: span 1;
}
.col-2 {
    grid-column: span 2;
}
.col-3 {
    grid-column: span 3;
}
.col-4 {
    grid-column: span 4;
}
.col-5 {
    grid-column: span 5;
}
.col-6 {
    grid-column: span 6;
}

.row-2 {
    grid-row: span 2;
}
.row-3 {
    grid-row: span 3;
}
.row-4 {
    grid-row: span 4;
}
.row-5 {
    grid-row: span 5;
}

/** Tablets */
@media (min-width: 768px){
    [class*="col-t-"] {
        /* Reset av row-span*/
        grid-row: span 1;
    }

    .col-t-1 {
        grid-column: span 1;
    }
    .col-t-2 {
        grid-column: span 2;
    }
    .col-t-3 {
        grid-column: span 3;
    }
    .col-t-4 {
        grid-column: span 4;
    }
    .col-t-5 {
        grid-column: span 5;
    }
    .col-t-6 {
        grid-column: span 6;
    }

    .row-t-2 {
        grid-row: span 2;
    }
    .row-t-3 {
        grid-row: span 3;
    }
    .row-t-4 {
        grid-row: span 4;
    }
    .row-t-5 {
        grid-row: span 5;
    }
}

/** desktop */
@media (min-width: 980px){
    [class*="col-d-"] {
        /* Reset av row-span*/
        grid-row: span 1;
    }

    .col-d-1 {
        grid-column: span 1;
    }
    .col-d-2 {
        grid-column: span 2;
    }
    .col-d-3 {
        grid-column: span 3;
    }
    .col-d-4 {
        grid-column: span 4;
    }
    .col-d-5 {
        grid-column: span 5;
    }
    .col-d-6 {
        grid-column: span 6;
    }

    .row-d-2 {
        grid-row: span 2;
    }
    .row-d-3 {
        grid-row: span 3;
    }
    .row-d-4 {
        grid-row: span 4;
    }
    .row-d-5 {
        grid-row: span 5;
    }
}

/** Large desktop */
@media (min-width: 1200px){
    [class*="col-ld-"] {
        /* Reset av row-span*/
        grid-row: span 1;
    }

    .col-ld-1 {
        grid-column: span 1;
    }
    .col-ld-2 {
        grid-column: span 2;
    }
    .col-ld-3 {
        grid-column: span 3;
    }
    .col-ld-4 {
        grid-column: span 4;
    }
    .col-ld-5 {
        grid-column: span 5;
    }
    .col-ld-6 {
        grid-column: span 6;
    }

    .row-ld-2 {
        grid-row: span 2;
    }
    .row-ld-3 {
        grid-row: span 3;
    }
    .row-ld-4 {
        grid-row: span 4;
    }
    .row-ld-5 {
        grid-row: span 5;
    }
}