grid.css

/************************************************************************
Name: XGrid
Version: 1.0.0
License: MPL-2.0
Author: Alexander Elias
Email: alex.steven.elis@gmail.com
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
************************************************************************/

/*
    large = --l
    medium = --m
    small = --s
    columns = --c
    rows = --r
*/

[style*="--r:"],
[style*="--c:"] {
    display: grid;
    /* grid-template-columns: repeat(var(--c, 12), minmax(0%, 1fr)); */
    /* grid-template-rows: repeat(var(--r, auto-fit), minmax(0%, 1fr)); */
    grid-template-columns: repeat(var(--c, 12), minmax(min-content, 1fr));
    grid-template-rows: repeat(var(--r, auto-fit), minmax(min-content, 1fr));
}

[style*="--r:"][style*="--l:"]>*,
[style*="--r:"] [style*="--l:"],
[style*="--c:"][style*="--l:"]>*,
[style*="--c:"] [style*="--l:"] {
    grid-row: span 12;
    /* grid-row: span var(--rl, var(--r, 12)); */
    grid-column: span var(--l, var(--c, 12));
}

[style*="--r:"][style*="--m:"]>*,
[style*="--r:"] [style*="--m:"],
[style*="--c:"][style*="--m:"]>*,
[style*="--c:"] [style*="--m:"] {
    grid-column: span var(--m, var(--c, 12));
}

[style*="--r:"][style*="--s:"]>*,
[style*="--r:"] [style*="--s:"],
[style*="--c:"][style*="--s:"]>*,
[style*="--c:"] [style*="--s:"] {
    grid-column: span var(--s, var(--c, 12));
}

[style*="--r:"][style*="--justify-l:"]>*,
[style*="--r:"] [style*="--justify-l:"],
[style*="--c:"][style*="--justify-l:"]>*,
[style*="--c:"] [style*="--justify-l:"] {
    justify-content: var(--justify-l, auto);
}

[style*="--r:"][style*="--justify-m:"]>*,
[style*="--r:"] [style*="--justify-m:"],
[style*="--c:"][style*="--justify-m:"]>*,
[style*="--c:"] [style*="--justify-m:"] {
    justify-content: var(--justify-m, auto);
}

[style*="--r:"][style*="--justify-s:"]>*,
[style*="--r:"] [style*="--justify-s:"],
[style*="--c:"][style*="--justify-s:"]>*,
[style*="--c:"] [style*="--justify-s:"] {
    justify-content: var(--justify-s, auto);
}

@media only screen and (min-width: 64em) {

    [style*="--r:"][style*="--m:"]>*,
    [style*="--r:"] [style*="--m:"],
    [style*="--c:"][style*="--m:"]>*,
    [style*="--c:"] [style*="--m:"] {
        grid-column: span var(--m, var(--s, var(--l, var(--c, 12))));
    }

}

@media only screen and (min-width: 75em) {

    [style*="--r:"][style*="--l:"]>*,
    [style*="--r:"] [style*="--l:"],
    [style*="--c:"][style*="--l:"]>*,
    [style*="--c:"] [style*="--l:"] {
        grid-column: span var(--l, var(--m, var(--s, var(--c, 12))));
    }

}