Grid Help!

[m a r i]

So, I recently learned how to use CSS Grids and I got it to mostly work on my test forum, except for one item which is driving me absolutely insane. I'm sure it's something incredibly simple that I'm just missing for some reason, but I would appreciate some help! 

Here is my testing site! I put the grid to use in my Info Center, but the last item (item4, the one with the last updated thread and discord image) doesn't seem to be confined to the css grid for some reason. I made a temporary fix by applying width:89% or something like that, but I quickly discovered it didn't work the same way when I toggled my sidebar. Is there a way to fix this so the content of the item isn't overlapping the padding of the right side of the info center? 

I appreciate anyone for looking into this! <3

[Kami]

It's currently looking fine to me even when the sidebar is expanded, so it would be helpful if you reverted your temp fix so we could see the problem in action.

[m a r i]

Kami Oh, I did revert it last night and it still looks funky. What browser are you using? I use Chrome. Here's a screenshot of what it looks like from my end. I also checked how it looks from my phone, and it looks the same. I also use a Mac/iPhone, though I didn't think that would make any sort of difference.

[elli]

I encountered the same problem recently when I converted a premade theme of mine to grid. Basically, the grid column gaps are working against you. Your column widths are 40% 25% 35%, but you also have a total of 40px spacing around each column. That equals 100% + 40px, which is why you're seeing this "escape" behavior.

Prior to Grid, our CSS solution would have been to use box-sizing: border-box, but that only solves part of the problem. I'd still recommend using it, but in addition to that, you'll want to set one of your columns width to 1fr. I'd recommend the last:

.fate-stats-grid {
 grid-template-columns: 40% 25% ~"1fr";
 box-sizing: border-box;
}
This will allow the grid to account for the column gap and leave the remaining space for your third column.

You could also use calc() to subtract the value of the gap on either side of the third column:

.fate-stats-grid {
 grid-template-columns: 40% 25% ~"calc(35% - 20px)";
 box-sizing: border-box;
}
Both to the same effect, but imo, the first is easier to understand.

Hope that helps. Let me know if you have any questions.

Edit: Here's a bit more robust solution: css-tricks.com/preventing-a-grid-blowout/
Alternatively, consider using just fr units: stackoverflow.com/questions/48214281/why-does-grid-gap-cause-an-overflow

Should also note that, in LESS (the preprocessor CSS language that the ProBoards stylesheet uses), we have to escape these unusual units because they aren't recognized. So 1fr becomes ~"1fr", and similarly with calc().

[m a r i]

elli It worked! Thank you so much - I was trying to figure that one out for hours! I appreciate the help. <3 Also, I LOVE your pre-made theme, I've been tempted to use it many times before!