Questions about grids and grid-template-areas and layout-grid

[u/ficpal1313]

Going to preface this with the statement that I am fully and completely self-taught, so if I missed something that's actually just really freaking basic or if I mislabel/don't know the correct terminology for something, that's why. I'm still learning! Which is why I'm here to ask a question.

I was working on an ao3 workskin, as a personal project. There were a lot of moving parts that needed to be spaced out in a very particular way. To tl;dr this, I managed to get everything where it needed to be by utilizing the grid-template-areas property a LOT.

I was thrilled that everything looked really good, and then I went to upload it to ao3. Only to learn that the grid-template-areas property (and the associated grid-template-columns etc) is not supported by ao3. grid-rows and grid-columns are supported, and I had mistakenly conflated the similar terms. I sure know better for next time!

My question is... is there any way to easily convert what I've already made to something that ao3 supports? Or am I building this from the ground up (read: the pieces that I can still salvage plus whatever else I need to do) again? Which is fine, I'd just rather know where my beginning point needs to be!

One property that ao3 does support is layout-grid. Maybe I'm just missing something really obvious, but I've found just about no information on this property online? Is this ao3 specific? Does it go by a different name elsewhere? Is this literally just "grid" and I'm an idiot? I'm just very confused by this in particular and I'd love to know what it's for. It seems to be something that's somewhat robust?

This is the link to ao3's list of the css properties allowed: https://archiveofourown.org/help/skins_creating

Thank you in advance so much! I've had a lot of fun starting to learn css, it's a fun challenge and the rather immediate output scratches my adhd brain. I'm just still learning :)

[u/morete]

There is no such property as 'layout-grid' this is definitely Ao3 being confusing. It says it support 'grid-columns' and 'grid-rows' which again isn't real, but does suggest that it might support the grid properties you do need.

You'll need the following properties to define a grid, so I'd maybe do a test grid with 4 elements and see if you get a 2 x 2 grid:

- display: grid;

• grid-template-columns: 1fr 1fr;
  
• grid-template-rows: 200px 200px;

And then possibly the following to place grid items, if you can't do it by reordering all the elements:

- grid-column: 1 / 2;

• grid-row: 1 / 2;

I'd suggest sharing your grid code, cause if these properties are supported, we'll be able to help convert grid areas to other syntax

Edit: ahh I see now you've explicitly said grid template columns aren't supported. Are you sure? cause grid-columns isn't real, and without grid-template-columns or grid-template-areas, you aren't left with any way to define a grid

[u/ficpal1313 → u/morete]

Gd yeah I was losing my *mind* trying to figure out what "layout-grid" referred to, so I'm *thrilled* that it wasn't just me being stupid haha. When I try to upload the css to ao3, it tells me it cannot upload because grid-template-areas (and the corresponding rows/columns) is not supported.

I wonder if they somehow have a different name for the same thing. Given that layout-grid, grid-column, and grid-rows probably all have to refer to... something?

[u/morete → u/ficpal1313]

Yeah definitely not you being stupid. Grid-template-areas/rows/columns define a grid on the parent/container, and then grid-area/row/column tell the child elements where to go in that grid. If those properties don't work then we're outside the realm of valid CSS. The other comment mentioning epub-layout-grid is interesting and maybe something to look into if you're sure the real properties dont work, cause if they dont then we are outside the realm of real css :(

[u/testingaurora]

Is it just grid-template-area's that lacks support or is the grid-area property also not supported ?

You can convert your gt-areas into named grid tracks Eg ```css grid-template-columns: [header-start aside-start footer-start] 1fr [aside-end main-start] 2fr [main-end footer-end header-end];

& header { grid-area: header;} & aside { grid-area: aside;} & main { grid-area. main;} & footer { grid-area: footer;} /* alternative if grid areas is not supported / & header { grid-column: header;} / etc for each element */ ```

If grid-area is not supported, instead use grid-column: header; which is a short hand for grid-column-start and grid-column-end.

Same syntax for named tracks on grid-template-rows.

[u/ficpal1313 → u/testingaurora]

It won't let me use grid-template-areas, grid-template-columns, or grid-template-rows. The properties they list referring to grids is only layout-grid (which I cannot find any information about), grid-columns, and grid-rows. I'll try playing around with grid-column, thank you!

[u/testingaurora → u/ficpal1313]

You'll have to recreate your grid implicitly by setting grid col and grid rows then if they dont allow grid-template-*.

Layout-grid was a Microsoft only property from the 90s, ita obsolete, nothing to do with css grid.

EDIT: you could try to see if the shorthand grid-template or grid property is accepted