Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago
snxxwyy

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/JjVrvGK
CodePenR
JjVrvGK
...
Was this page helpful?