.d-grid {
    @each $screen in map-keys($tab-screen) {
        @include media-screen($screen) {
            $infix: infix-elt($screen, $tab-screen);

            @for $i from 1 through $columns {
                &.#{$infix}of-#{$i}{ grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); }
            }

            @for $i from 1 through 5 {
                $gap: $gutter * $i * 2;
                &.#{$infix}gap-#{$i}{ grid-gap: $gap; }
                &.#{$infix}gapCol-#{$i}{ grid-column-gap: $gap; }
                &.#{$infix}gapRow-#{$i}{ grid-row-gap: $gap; }
            }

            > .cell {
                @for $i from 1 through $columns {
                    &.#{$infix}colspan-#{$i}{ grid-column: span #{$i} / span #{$i}; }
                    &.#{$infix}colspanStart-#{$i}{ grid-column-start: #{$i}; }
                    &.#{$infix}colspanEnd-#{$i}{ grid-column-end: #{$i}; }

                    &.#{$infix}rowspan-#{$i}{ grid-row: span #{$i} / span #{$i}; }
                    &.#{$infix}rowspanStart-#{$i}{ grid-row-start: #{$i}; }
                    &.#{$infix}rowspanEnd-#{$i}{ grid-row-end: #{$i}; }
                }

                &.#{$infix}colspan-all { grid-column: 1 / -1; }
                &.#{$infix}rowspan-all { grid-row: 1 / -1; }
            }
        }
    }
}