Why am I having extra spaces in my Grid Items?
Hello everyone! I wanna know why there's extra space in my grid items although I did not set any height to each component? If you look closely, contents in 'nav' and 'footer' area is not centered. (See 1st & 2nd pictures attached) My goal is to set my 'nav' to its min-content and 'aside' will take the available row spaces. (See 3rd picture attached)
I'm using Grid components in ChakraUI.
Here's my layout code in App.jsx:
https://codesandbox.io/s/empty-morning-d9yxl9?file=/src/App.js
Thank you!
2 Replies
*third pic
Unfortunately your codesandbox.io link is not showing the preview as it is missing data.
Does the browser inspector not shed any light as to where the seemingly random grid row heights are coming from, especially the row with the nav?
I can understand the footer height as you have set the hero section to have 85vh so that more or less looks right.