style-forge.helpers/src/columns/items.css

Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.

[class*='cols'].reverse:not(.ltr),
[class*='cols'].reverse\:wrap:not(.ltr)
{ direction: rtl }

[class*='cols'].reverse > *:not(.rtl),
[class*='cols'].reverse\:wrap > *:not(.rtl)
{ direction: ltr }

/* flex */
.d\:f[class*='cols'], .d\:f\:x[class*='cols'], .d\:f\:y[class*='cols'] { margin: 0 }

.d\:f[class*="cols"] > [class*="col"],
.d\:f\:x[class*="cols"] > [class*="col"],
.d\:f\:y[class*="cols"] > [class*="col"]
{ width: calc(var(--col, 1) / var(--cols, 12) * 100%) }

.d\:f[class*="cols"] > [class*="col:start"],
.d\:f\:x[class*="cols"] > [class*="col:start"],
.d\:f\:y[class*="cols"] > [class*="col:start"]
{ margin-left: calc((var(--cs, 1) - 1) / var(--cols, 12) * 100%) }

.d\:f[class*="cols"] > [class*="col:end"],
.d\:f\:x[class*="cols"] > [class*="col:end"],
.d\:f\:y[class*="cols"] > [class*="col:end"]
{ margin-right: calc((var(--ce, 1) - 1) / var(--cols, 12) * 100%) }

[class*='cols'].reverse.d\:f:not(.rtl),
[class*='cols'].reverse\:wrap.d\:f:not(.rtl),
[class*='cols'].reverse.d\:f\:x:not(.rtl),
[class*='cols'].reverse\:wrap.d\:f\:x:not(.rtl),
[class*='cols'].reverse.d\:f\:y:not(.rtl),
[class*='cols'].reverse\:wrap.d\:f\:y:not(.rtl)
{ direction: ltr }

/* grid */
.d\:g[class*='cols'], .d\:g\:x[class*='cols'], .d\:g\:y[class*='cols'] { margin: 0 }

[class*='cols'] { grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)) }
[class*='rows'] { grid-template-rows: repeat(var(--rows, 12), minmax(0, 1fr)) }

[class*="cols"] > [class*="col"] { grid-column: span var(--col, 1) / span var(--col, 1) }
[class*="cols"] > [class*="col:start"] { grid-column-start: var(--cs, 1) }
[class*="cols"] > [class*="col:end"] { grid-column-end: calc(var(--ce, 1) + 1) }

[class*="rows"] > [class*="row"] { grid-row: span var(--row, 1) / span var(--row, 1) }
[class*="rows"] > [class*="row:start"] { grid-row-start: var(--rs, 1) }
[class*="rows"] > [class*="row:end"] { grid-row-end: calc(var(--re, 1) + 1) }

.d\:g[class*='cols'] > *, .d\:g\:x[class*='cols'] > *, .d\:g\:y[class*='cols'] > *,
.d\:g[class*='rows'] > *, .d\:g\:x[class*='rows'] > *, .d\:g\:y[class*='rows'] > *
{
  --sf-grid-width: auto;
  width: var(--sf-grid-width);

  margin-top: calc(var(--sf-gap-y) * 0);
  margin-left: calc(var(--sf-gap-x) * 0);
  margin-right: calc(var(--sf-gap-x) * 0);
  padding-top: calc(var(--sf-gap-y) * 0);
  padding-left: calc(var(--sf-gap-x) * 0);
}

/* /// */

html.var [class*='cols'].reverse.d\:f\:y:not(.ltr),
html.var [class*='cols'].reverse\:wrap.d\:f\:y:not(.ltr),

html.flex [class*='cols'].reverse.d\:f:not(.ltr),
html.flex [class*='cols'].reverse\:wrap.d\:f:not(.ltr),
html.flex [class*='cols'].reverse.d\:f\:x:not(.ltr),
html.flex [class*='cols'].reverse\:wrap.d\:f\:x:not(.ltr),
html.flex [class*='cols'].reverse.d\:f\:y:not(.ltr),
html.flex [class*='cols'].reverse\:wrap.d\:f\:y:not(.ltr)
{ direction: rtl }

html.grid [class*='cols'].reverse.d\:g:not(.rtl),
html.grid [class*='cols'].reverse\:wrap.d\:g:not(.rtl),
html.grid [class*='cols'].reverse.d\:g\:x:not(.rtl),
html.grid [class*='cols'].reverse\:wrap.d\:g\:x:not(.rtl),
html.grid [class*='cols'].reverse.d\:g\:y:not(.rtl),
html.grid [class*='cols'].reverse\:wrap.d\:g\:y:not(.rtl)
{ direction: ltr }

html.flex [class*='cols'].reverse.d\:g:not(.ltr),
html.flex [class*='cols'].reverse\:wrap.d\:g:not(.ltr),
html.flex [class*='cols'].reverse.d\:g\:x:not(.ltr),
html.flex [class*='cols'].reverse\:wrap.d\:g\:x:not(.ltr),
html.flex [class*='cols'].reverse.d\:g\:y:not(.ltr),
html.flex [class*='cols'].reverse\:wrap.d\:g\:y:not(.ltr)
{ direction: rtl }