Content-based CSS grid stretches over width but not height - css

Question

In the example below, the .grid-container div will stretch over the width of the body (that is, the viewport width), but its height will be the same as the .grid-item height.
Any explanations to why that is the case? I'm having trouble wrapping my head around it.
body {
width: 100vw;
height: 100vh;
}
.grid-container {
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
}
<div class="grid-container">
<div class="grid-item">Grid item</div>
</div>

Answer 1

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
}
.grid-container {
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
background-color: red;
}
.grid-item {
background-color: blue;
}
<div class="grid-container">
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
</div>
as you can see what you are doing here is not a grid. It would be better if you use CSS flexbox instead of grid for one column grid.
just replace this code with grid-container class
display: flex;
flex-direction: column;
align-items: center;
justify-items: space-around;
and also note that every element of type div in HTML takes the whole width of the line and it's height is defined by the content inside it. It doesn't stretch all the way down to the bottom until you set a fixed height to it. you can set position: relative; to grid container parent and set its position to absolute. then add width: 100%; and height: 100%; to it.
add more information about your code for more detailed help.

Answer 2

After reading MDN's display page, I think I found the answer:
grid The element behaves like a block element and lays out its content according to the grid model.
The grid container by default behaves like a block element, which is why it will span the entire width of the parent when its size is not set explicitly. You can prevent this behavior and make it inline with display: inline grid or display: inline-grid (legacy).
body {
width: 100vw;
height: 100vh;
}
.grid-container {
display: inline grid;
grid-template: 1fr / 1fr;
place-items: center;
}
<div class="grid-container">
<div class="grid-item">Grid item</div>
</div>