It has been noted by others that because the item element is not a direct child of the grid container, you cannot apply grid properties to it.
To address this issue, one potential solution could be to extract the item from the home-main div and make it a direct child of the grid. However, it appears that this may not be a feasible solution in this particular case.
The Grid Layout Module Level 2 introduces Subgrids which are designed to resolve this specific problem. While Subgrid is currently only a draft spec, in your scenario you might use the following approach:
.home-main {
display: subgrid;
grid-column: span 3;
}
Alternatively, there is another method to achieve the desired outcome:
According to Caniuse:
display: contents causes an element's children to appear as if they
were direct children of the element's parent, ignoring the element
itself. This can be useful when a wrapper element should be ignored
when using CSS grid or similar layout techniques.
To ensure that the grid placement properties apply to the item, you can simply add display: contents; to home-main (currently supported in Firefox):
.home-main {
display: contents;
...
}
(Please note that this will override the grid properties on home-main, but it is unnecessary for placing the item)
.home-grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 0.10fr 0.98fr auto;
height: 100vh;
}
.home-header {
grid-column: 1 / span 3;
grid-row: 1 / span 1;
background: #3f51b5;
}
.home-main {
/*grid-column: 1 / span 3;
grid-row: 2 / span 3; */
display: contents;
background: #81d4fa;
}
.item {
grid-column: 2 / span 1;
grid-row: 2 / span 3;
background: salmon;
}
.home-footer {
grid-column: 1 / span 3;
grid-row: 5 / span 1;
background: #3f51b5;
}
.home-footer div {
text-align: center;
margin: 2vh;
}
<div class="home-grid-container">
<div class="home-header">
<h1>
<img src="/src/imgs/sitelogo.png" />
</h1>
</div>
<div class="home-main">
<div class="item">
Simple, Fast, Powerful
<input type="button" value="100% Free" />
</div>
</div>
<div class="home-footer">
<div>All Rights Reserved</div>
</div>
</div>