grid-area

Hey
when i add this css code to the custom css - 

.fe-block-yui_3_17_2_1_1691665835354_36577 {

grid-area: 9/6/9/15 ;

}

for some reason i see this in the browser - 

grid-area: .01111111 ;

what can cause this ?

2 minutes ago, stephan_bazbaz said:

when i add this css code to the custom css

What are you trying to achieve? Can you share your website URL and this page?

@Ziggy
im just trying to change the grid area of a block..
this is the original code - 

grid-area: 8/12/12/22;

and i want to change it.
the website is private at the moment..

I have on occasion tried to change the grid position (or block size) via this method, but I haven't found a method that works via Custom CSS. 

I was asking the purpose to see if I could help with another way of approaching this change.

@stephan_bazbaz you need to surround it with quotes like this

 grid-area: ~"8 / 12 / 12 / 22" !important;

these need to be escaped...

Is there a way to do this without !important? 

I'm trying to resize certain blocks (to expand horizontally on screen shrinking) by making my div start one col earlier and end one col later for certain screen sizes, but I don't want it to be important for everything. Also, !important is just a real shoddy method and I'm wishing just changing the grid would work
Here's what the code is now in chrome dev tools, and I've tried both just the shorthand and the long way and neither of them will react to 2/3/4/15
(also, I definitely have it selected. it works with important)

    grid-area: 2/4/4/13;
    grid-row-start: 2;
    grid-column-start: 4;
    grid-row-end: 4;
    grid-column-end: 13;

@jdb99 you can try it without important and increase the specificity by adding a collection id. section id and then block id. You also need to put all that grid stuff inside the quotes with the "~" in front of it like this. Since it's a LESS preprocessor what you see on the front end is not always the way it works on the back end.

~"8 / 12 / 12 / 22"

My assumption for your code would be something like this but without having the back end access I can't really test.

grid-area: ~"2/4/4/13";
grid-row-start: ~"2";
grid-column-start: ~"4";
grid-row-end: ~"4";
grid-column-end: ~"13";

I'm not entirely sure you need the escape when you're doing the single numbers long handed but in the short hand version you definitely need it.

If you want to share a link we can maybe help get you the right selectors to avoid the !important thing. I honestly find that I need that a lot with Squarespace considering all the crazy selectors they have setup in their own CSS.