100vh on a grid
(Solution index and css files are here: https://github.com/TheOdinProject/css-exercises/tree/main/grid/03-grid-layout-3/solution)
Hello, i added border-box to * element, height: 100vh to html, body element and height: 100% to container element in solution.css. But still, i have a small vertical scrolling and if i remove 4 px gap. The problem solved. So, does border-box behave differently here for gap in grid and how to fix it? And i know using fix height is not a good thing but, in this context should it be a problem that much? If answer is yes, how? Thank you for your answers.
7 Replies
Kevin Powell
YouTube
Use these instead of vh
Looking to step up your CSS game? 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=viewportunits I have a bunch of courses, including several free ones.
I see people use
vh a lot, and then complain that it doesn’t work the way they thought it would, so in this one, I explore a few other options that we have,...Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts
Join the Discord: https://kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
https://codepen.io/b1mind/pen/PojdyQz?editors=0100
I tend to still use 100% for a fallback for svh, but sometimes its best to use vmin/vmax in a media query depending on what you need.
Sidenote: you would not want to use anything but % on html. Also know when you use any of the viewport units (not %) it can overflow the parent.
Where as % relys on the parents size (html is 100% of viewport) then passed down.
Also as you can see I use border-box (always) and if you add gaps to either flex/grid in my codepen, it should not effect it.
I watched that two videos but, that does not answer the situation at hand. Could you please explain it through my example why gap give a vertical scrolling and you can give me any knowledge around it if it makes easier to understand. Sorry, i don't know if i explained my problem wrong but, i want to learn from you what's the problem and solution here. Thanks for taking your time.
Here's a very simple example of what's happening: https://codepen.io/kevinpowell/pen/abgOyyp
If you change the gap from 200px to something bigger or smaller, the second element moves up and down.
If you have a height on something, but the content in that thing is too big to fit in that space, it'll just overflow out the bottom, like in my example if you have the gap bigger than 100px
So, when you're adding the
gap of 4px, it's pushing the elements in the second row down by 4px.Actually it worked with border-box when i looked that again but, there is a shift when i'm using border-box and grid-items growing too much. I'm looking what's wrong for the entire day, so my mind is a little bit tired. Sorry for taking your time, have a good day and thanks for your answer.
I used min-content for grid-template-row when i want to grid item to shrink. Now, it is taking less space. So, this resolved the issue. I still don't understand why changes between the content-box and border-box is that dramatic in this example but, i will research Kevin's video on that. I changed this topic to solved. Thanks.
