write a reply

Stretch the last board in the forum row?

pronounsThey/Them
544written posts
Coyoteearned bits
offlinecurrently
Coyote
Part of the Furniture
Coyote Avatar
Hello!

I'm attempting to do some tweaks on a skin, but I'm not sure how to achieve the effect I'm looking for?


havensreach.jcink.net/index.php?act=idx
Site link

The boards go side by side, but I'd like for the last board in a category to stretch across all of the side by side boards above it


imgzb.com/images/2023/07/26/8F6rj.png <--for example!

I've never known how to pull this off so I thought I would ask for help here! Thanks a bunch!
aliasNwah
pronouns¯\_(ツ)_/¯
239written posts
Noireearned bits
offlinecurrently
Noire
Spring '21 Dev Completionist
Noire Avatar
No cracks, no breaks; no mistakes
What should a 2-forum category look like?

Inevitably, that'll be your blockade, and that's where you have a couple different options based on how you want to handle gaps - including "I'll just never make a category with 2 forums".

If you like that solution, then all you have to do is slap in an extra:
catboards > forumrow:last-child {
grid-column-start: 1;
grid-column-end: 4;
}

... and your last forum will always stretch all 3 columns in the grid, although this will leave gaps if you don't have a clean number of 3n+1 forumrows. Grid just... wasn't made to distribute empty space like that.

You could also specify an exact grid layout per category, but IMO this is the same problem of "and now you have to babysit the main index literally every time you add/remove/change forums", which to me isn't a good approach.

For me personally, I'd use flex, which first requires changing your catboards from grid to flex:
catboards {
display: flex;
margin: 0px auto 150px;
gap: 3vw;
flex-wrap: wrap;
justify-content: center;
}


.. Then adding this to forumrows to work with flex:

flex: 1 1 30%;


This attribute says "make each forumrow initially 30%, but they can grow or shrink to fill empty space". IE, if there's just one element in the row, it'll grow to 100%, and 2 elements each grow to ~50%ish, minus gap math, etc.

Still a lot more styling you can do, again just depends on how you want empty space to be handled.
Sorojin's Labyrinth