cirrus-ui/src/base/grid.scss

@use 'sass:map';

@use '../internal' as *;

/* GRID */

:root {
    --grid-template-column: repeat(#{$grid-columns}, minmax(0, 1fr));
    --grid-column-start: auto;
    --grid-column-end: auto;
    --grid-row-start: auto;
    --grid-row-end: auto;
}

@include generate-styles-with-viewports($generate-viewports: #{get-viewport-flag($GRID)}) using ($viewport) {
    $suffix: if($viewport != '', '-#{$viewport}', '');

    .grid#{$suffix} {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns: var(--grid-template-column);
    }

    @for $i from 1 through $grid-columns {
        /* Templates */
        .grid-cols-#{$i}#{$suffix} {
            --grid-template-column: repeat(#{$i}, minmax(0, 1fr));
        }

        /* Column expansion */
        .grid-c-#{$i}#{$suffix} {
            grid-column: span #{$i} / span #{$i};
        }

        /* Row expansion */
        .grid-r-#{$i}#{$suffix} {
            grid-row: span #{$i} / span #{$i};
        }

        /* Cell Column Start/End */
        .grid-cs-#{$i}#{$suffix} {
            grid-column-start: #{$i};
        }
        .grid-ce-#{$i}#{$suffix} {
            grid-column-end: #{$i + 1};
        }

        /* Cell Row Start/End */
        .grid-rs-#{$i}#{$suffix} {
            grid-row-start: #{$i};
        }
        .grid-re-#{$i}#{$suffix} {
            grid-row-end: #{$i + 1};
        }
    }

    .grid-ce-end#{$suffix} {
        grid-column-end: -1;
    }
    .grid-re-end#{$suffix} {
        grid-row-end: -1;
    }
    .grid-ce-auto#{$suffix} {
        grid-column-end: auto;
    }
    .grid-re-auto#{$suffix} {
        grid-row-end: auto;
    }
}