# Does grid support variables

**URL:** https://forum.pinegrow.com/t/does-grid-support-variables/3923
**Category:** Support Forum Feedback
**Tags:** question
**Created:** [April 6, 2020, 10:22am UTC](https://forum.pinegrow.com/t/does-grid-support-variables/3923 "2020-04-06T10:22:54Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![rockbabee](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rockbabee/32/2518_2.png) [@rockbabee](https://forum.pinegrow.com/u/rockbabee)
#### Post date: [April 6, 2020, 10:22am UTC](https://forum.pinegrow.com/t/does-grid-support-variables/3923/1 "2020-04-06T10:22:54Z")

</div>

Hello,  
I wanted to ask, does Pinegrow Grid supports css variables, like this?  
Please see screenshot, what I could be doing wrong 🙂  
: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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/3a5aac5f17b959238e90f0e5a35c1fb601c22f0d.png)

---

<div class="post-metadata">

### Author: ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [April 6, 2020, 9:41pm UTC](https://forum.pinegrow.com/t/does-grid-support-variables/3923/2 "2020-04-06T21:41:36Z")

</div>

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.