alignment issue with custom class
Hey, so i was recently playing around with Andy bell's
auto-grid class which essentially makes it easier to manage responsive grids. I added the ability to change the align-items property in the class with a variable allied with a fallback, similar to some of the other properties already located in there, However this doesn't seem to function as expected and rather reads the fallback over the defined variable.
The fallback of the align-items property is start, i'm aiming to change it to center via the variable --auto-grid-alignment-vertical. When i define this in the .hero__inner class whose items are affected by the grid by doing --auto-grid-alignment-vertical: center;, it doesn't seem to change, however when i change how it's defined in the auto-grid class either by doing align-items: var(--auto-grid-alignment-vertical, center); or align-items: center, it seems to work perfectly. I'd appreciate any help with this, thanks in advance.
codepen link: https://codepen.io/deerCabin/pen/JjVrvGK1 Reply
oops it was a typo the whole time that flew right past me, apologies for wasting anyone's time if they looked into it 🙏🏼.