Using grid to lay out a website, avoiding potential use of dvh
Hi, so I have really two questions that go hand in hand.
See, I am new in this whole "using grids to lay out" sites thing. I have seen a lot of people simply add those grid elements to the body tag itself, which honestly was pretty eye-opening, although messing with the body tag like that is a little daunting, but there doesn't seem to be an issue with it?
The reason I'm asking this is because I was doing an assignment from The Odin Project and placed a div container inside of the body to create the grid layout. However, when zooming out, the bottom of the page would simply end without rendering, like in the attachment. Once I asked how I could solve it since 100vh didn't seem to work in the server for the course, someone simply added a 100dvh to the div containing the grid, which worked. However, I know that, while the dynamic viewport units are supported in all major browsers, they're still relatively new and could not be the best fit for compatibility or the likes. And thus, I am wondering two things:
- Would it be better to just outright turn the body into the grid to avoid using dvh units?
- If not, what's the best way to make the website fit properly?
6 Replies
i usually add grid to the body itself. and i use svh and vh as a fallback
Something like this
I see!!
Is it common to do this?
Yeah. I know some people don't like styling the body, but i have never really had any problems with it. And i see many other big websites have styled the body too. Seems to be fairly common...
I see!! I guess I just never really saw ppl talk about it much, so it seemed like somthing kinda distant, I dunnbo
The primary argument against styling the body directly is a lot of browser plugins add classes to the body, and use that to hook into for styling the stuff the plugin adds, whether it's a password manager, something like grammerly, or whatever else that might need onscreen elements.
Because they do that, there is a very small risk of some strange conflict happening. I've never actually seen this happen, but I think the idea is "it's basically the same thing to put a div directly in the body and use that instead, and have zero risk".
I honestly think either approach is perfectly fine.
As for the 100vh thing, I'd do like tok124 said, first declare with
vh and then a second with dvh or svh. And min-height is the way to go, so if their screen is smaller, it still works fine and they just have to scroll.Ah wow!! I see now, I guess it's important to keep that in mind. So I'm assuming the reason it's min-height is so that it never goes smaller but has room to grow instead of height, where it has issues when zooming in more. And the double declaration is basically a fallback. Got it!!! Thank you for the insight!!