write a reply

Stretch the last board in the forum row?

pronounsThey/Them
547written posts
Ludoearned bits
offlinecurrently
Ludo
Part of the Furniture
Ludo 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!
0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted Avatar
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.