Why setting display grid without using grid template columns/rows creates new row with space
Hello, I have a quick question. Consider the following codepen. I have set display of grid on my
body element and center the items. When I add 2 element inside my grid container, it seemas that the body is divided equally for these 2 elements.
My question is why is that so? What is happening here? Like I didn't set any padding nor any gap and the elements appears like that. What creates the space?
https://codepen.io/Fakeur/pen/ByyMeMa
13 Replies
normally we don't even have a gap else they would appear in the grid lines, right?
Here, it's like each element is taking half of the body element
cuz of the min-height?
ah ok I see, setting the min-height ensures that both element takes the height of the full viewport, the reason of why each element have equal height is because of the display of grid?
yes
also, if you dont set anything, it will have 1 column and 1 row, with
autowhen we don't set anything when we have display grid, we always have 1 col and 1 row?
by default, yes
noted, thanks !
Small question, noticed that each time the content of the
p element is displayed, their is some kind of reflow. Is there a way I can "reserved" the space in the viewport? Maybe using visibility instead of displays? Like instead of none, setting it to hidden?
just modified my codepen to do so, would appreciate if anyone can give their opinions :cuh, what do you mean?
Like previously, when I use display of block and none, each time we see the viewport change, like its height
this isn't really visually appealing, so I switched to visibility instead of display
thats because of the margin on the
pah ok I see, I will test, thanks !
you're welcome