Does grid support variables

General Support Forum Feedback
1

Hello,
I wanted to ask, does Pinegrow Grid supports css variables, like this?
Please see screenshot, what I could be doing wrong :slight_smile:
:root {
/* Grid settings */
–grid-columns-number: 24;
–grid-columns-min: 13;
–grid-columns-max: 50;
–grid-column-percentage-size: calc(100% / var(–grid-columns-number));
–grid-gap: 0;
–max-width: 1920;

  /* Grid column width units assignment */
  --grid-columns-min-size: calc(var(--grid-columns-min) * 1px);
  --grid-columns-max-size: calc(var(--grid-columns-max) * 1px);

  /* Grid gap width units assignment */
  --grid-gap-size: calc(var(--grid-gap) * 1px);

  /* Wrapper width calculation and units assignment*/
  --min-width: calc(var(--grid-columns-number) * var(--grid-columns-min));
  --wrapper-min-width: calc(var(--min-width) * 1px);
  --wrapper-max-width: calc(var(--max-width) * 1px);

  /* Layout grid*/
  --grid-columns-minmax: minmax(var(--grid-columns-min-size), var(--grid-columns-max-size));
  --grid-template-columns-number: repeat(var(--grid-columns-number), var(--grid-columns-minmax));
  --grid-template-columns: [full-start] 1fr [wrapper-start] var(--grid-template-columns-number) [wrapper-end] 1fr [full-end];
}

.grid {
  min-width: var(--wrapper-min-width);
  max-width: var(--wrapper-max-width);
  display: grid;
  grid-template-columns: var(--grid-template-columns);
  grid-template-areas: var(--grid-template-areas);
  grid-gap: var(--grid-gap-size);
}

.subgrid {
  display: grid;
  grid-template-columns: var(--grid-template-columns-number);
  grid-gap: var(--grid-gap-size);
}

.grid .full-width {
  grid-column: full-start / full-end;
}

.subgrid.full-width {
  display: grid;
  grid-template-columns: inherit;
}

image
image3840×2115 725 KB

2

PG does support CSS variables and grid but it’s difficult to tell by looking what you are trying to accomplish.

line 7 calls for a calc using 100% as a constant… seems an odd mix that might consider testing separately to make sure it’s doing what you think it’s doing.