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?
No description
6 Replies
Tok124 (CSS Nerd)
i usually add grid to the body itself. and i use svh and vh as a fallback Something like this
body {
min-height:100vh;
min-height:100svh;
display:grid;
grid-template-columns:auto 1fr;
}
body {
min-height:100vh;
min-height:100svh;
display:grid;
grid-template-columns:auto 1fr;
}
Highly Nonexistent
I see!! Is it common to do this?
Tok124 (CSS Nerd)
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...
Highly Nonexistent
I see!! I guess I just never really saw ppl talk about it much, so it seemed like somthing kinda distant, I dunnbo
Kevin Powell
Kevin Powell10mo ago
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.
Highly Nonexistent
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!!
Want results from more Discord servers?
Add your server