cirrus-ui/src/base/grid.scss

A lightweight UI framework written in SCSS

@use 'sass:map';

@use '../src/internal/generator_v2';
@use '../src/internal' as *;

/* GRID */

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

@include generator_v2.utility-with-body(
        $variants: get-pseudo-variants($GRID),
    )
    using ($props...) {
    // .grid {}
    @include generator_v2.inline-class-generator('grid', $props...) using ($props...) {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns: var(--grid-template-column);
    }

    // .grid-flow-row {}
    @include generator_v2.inline-class-generator('grid-flow-row', $props...) using ($props...) {
        grid-auto-flow: row;
    }

    // .grid-flow-col {}
    @include generator_v2.inline-class-generator('grid-flow-col', $props...) using ($props...) {
        grid-auto-flow: column;
    }

    @for $i from 1 through $grid-columns {
        /* Templates */
        // .grid-cols-<i>
        @include generator_v2.inline-class-generator('grid-cols-' + $i, $props...) using ($props...) {
            --grid-template-column: repeat(#{$i}, minmax(0, 1fr));
        }

        /* Column expansion */
        // .grid-c-<i>
        @include generator_v2.inline-class-generator('grid-c-' + $i, $props...) using ($props...) {
            grid-column: span #{$i} / span #{$i};
        }
        
        /* Cell Column Start/End */
        // .grid-cs-<i>
        @include generator_v2.inline-class-generator('grid-cs-' + $i, $props...) using ($props...) {
            grid-column-start: #{$i};
        }
        // .grid-ce-<i>
        @include generator_v2.inline-class-generator('grid-ce-' + $i, $props...) using ($props...) {
            grid-column-end: #{$i + 1};
        }
    }

    @for $i from 1 through $grid-rows {
        /* Templates */
        // .grid-rows-<i>
        @include generator_v2.inline-class-generator('grid-rows-' + $i, $props...) using ($props...) {
            --grid-template-row: repeat(#{$i}, minmax(0, 1fr));
            grid-template-rows: var(--grid-template-row);
        }

        /* Column expansion */
        // .grid-r-<i>
        @include generator_v2.inline-class-generator('grid-r-' + $i, $props...) using ($props...) {
            grid-row: span #{$i} / span #{$i};
        }
        
        /* Cell Column Start/End */
        // .grid-rs-<i>
        @include generator_v2.inline-class-generator('grid-rs-' + $i, $props...) using ($props...) {
            grid-row-start: #{$i};
        }
        // .grid-re-<i>
        @include generator_v2.inline-class-generator('grid-re-' + $i, $props...) using ($props...) {
            grid-row-end: #{$i + 1};
        }
    }

    // .grid-ce-end {}
    @include generator_v2.inline-class-generator('grid-ce-end', $props...) using ($props...) {
        grid-column-end: -1;
    }
    // .grid-re-end {}
    @include generator_v2.inline-class-generator('grid-re-end', $props...) using ($props...) {
        grid-row-end: -1;
    }
    // .grid-ce-auto {}
    @include generator_v2.inline-class-generator('grid-ce-auto', $props...) using ($props...) {
        grid-column-end: auto;
    }
    // .grid-re-auto {}
    @include generator_v2.inline-class-generator('grid-re-auto', $props...) using ($props...) {
        grid-row-end: auto;
    }
}