CSS Grid keeps growing to fit content. How can I stop that?

[Karasu]

So I'm redoing my website using grid because flex keeps giving me way too many problems. I thought grid would help remedy that but I'm having similar issues. Mostly with content resizing the boxes when i dont want them to. In the pictures attached, the first (goal) is what it should look like, and the second (problem) is what it looks like with content added. I've seen online that grid always resizes to the content, so you need to add overflow: hidden; or min-width: 0; to fix this but that's not working for me. Ive also attached the html and css if that helps. Any help would be appreciated! I just want to get the layout working so I can finally start adding more content and pages! Thank you!

[Dan Q]

It's hard to be sure from the screenshot, but it looks like there might be a few problems here that are getting in the way, e.g.

• Your HTML applies id="centerTop" but your CSS expects #top-center.
• Your <section>s use grid-area: box-1 but your CSS defines grid areas tc-1, tc-2, etc.
• You're applying overflow: hidden on an element that doesn't have a fixed size. This is probably the actual problem; see below.

overflow: hidden only hides content that would otherwise "escape" from a container. It doesn't stop a container growing larger if it's got "too much" content in it. So for most containers, setting overflow: hidden does nothing. What you probably need is to force the size of the container to whatever it is you want. To see this in action, take an element on which you've set overflow: hidden and give it some silly dimension, like height: 25px, and see how its content gets cut-off.

Right now your containers do NOT have any size "forced" upon them (as far as I can see from the screenshot). Your grid is using fractional units like your columns of "2fr 3fr". "2fr 3fr" means "the first column is two fifths, the second is three fifths" (or, I suppose "the second column is 50% wider than the first"). But that's not a constraint on its absolute size; only on its size relative to its neighbour. If you switch these to absolute units that would probably make your overflows work as you'd expect... or alternatively if you specify the size of the grid container itself that would probably impose an absolute value on those fractions!

I hope that helps. I feel like I can't "see" exactly what the problem is from your screenshots, but I'm hoping that'll help move things in the right direction!

[Karasu]

Hey Dan! Thanks for responding. As for the first 2 bullets, yeah I forgot I took a screenshot of my old code for it. The current code is center-top and tc-1, 2 etc. That was my bad.

I also meant to say overflow: none, not hidden for what I've seen online. I tested that and it didn’t work as well. (Sorry I posted this past midnight I was dead tired lol)

And the container is actually set to height: 800px; which is why I was so confused on why this is happening. Heres the link to my site if you'd wanna take an F12 look into it https://karasushima.neocities.org/

Edit: I realized that I set the #main-top to 800px height, do I need to set each individual childs height as well? Like basically right now, the whole top is one container, which is the sidebar-center-sidebar. And then the center is broken up into the 3 pieces. The about-me is one of those center pieces

Edit 2: Yep that did it. Added height: 800; to each individual piece and it worked. Thank you so much man youre a lifesaver!