Getting grid-row to override grid-template-rows - html

Question

I am asking this for my own education, if it is something that is bad practice feel free to say so.
I want elements #one #two #three and #four to have their parent property grid-template-rows: 100px 100px 100px 100px overwritten by setting individual grid-row settings to each element.
Elements #one and #two are responding as I expect when I set them like this:
#one{
grid-row: 1/ span 4 ;
}
#two{
grid-row: 1/ span 4 ;
}
However, when I attempt to apply similar settings to #three and #four I do not get the result I expect. I expect the height of #three and #four to be exactly the same as #one and #two. Instead they fly off to the side of the page.
I expected this to display the elements similar to #one and #two. It doesn't work:
#three{
grid-row: 2/ span 4 ;
}
#four{
grid-row: 2/ span 4 ;
}
I want to know how to fix this and the correct individual values to set #three and #four to overwrite grid-template-rows as described.
Code: https://jsfiddle.net/ek2r6a19/
* {
font-family: Helvetica;
font-size: 1em;
color: white;
text-align: center;
}
img {
display: block;
margin: 20px 20px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
border-width: 5px;
border-style: solid;
border-color: rgb(141, 110, 99);
max-width: 50%;
height: auto;
}
/*_____________________________GRID */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 100px 100px 100px 100px 100px;
grid-gap: 10px;
}
.container div:nth-child(even) {
background-color: orange;
}
.container div:nth-child(odd) {
background-color: purple;
}
#one {
grid-row: 1/ span 4;
}
#two {
grid-row: 1/ span 4;
}
/*
I expected this to display the elements similar to #one and #two. It doesn't work
#three{
grid-row: 2/ span 4 ;
}
#four{
grid-row: 2/ span 4 ;
}
*/
<div class="container">
<div id="one">1
<div class="content-container">
</div>
</div>
<div id="two">
2
<div class="content-container">
text
</div>
</div>
<div id="three">3
<div class="content-container">
text
</div>
</div>
<div id="four">4
<div class="content-container">
text
</div>
</div>
<div id="five">5
<div class="content-container">
text
</div>
</div>
<div id="six">6
<div class="content-container">
text
</div>
</div>
</div>

Answer 1

You need to override the grid auto-placement algorithm, which calculates the "right" places to render grid areas, when they're not explicitly defined.
You're defining the rows. Just define the columns, as well.
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 100px 100px 100px 100px 100px;
grid-gap: 10px;
}
#one {
grid-row: 1 / span 4;
grid-column: 1; /* new */
}
#two {
grid-row: 1 / span 4;
grid-column: 2; /* new */
}
#three {
grid-row: 2 / span 4;
grid-column: 1; /* new */
}
#four {
grid-row: 2 / span 4;
grid-column: 2; /* new */
}
* {
font-family: Helvetica;
font-size: 1em;
color: white;
text-align: center;
}
img {
display: block;
margin: 20px 20px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
border-width: 5px;
border-style: solid;
border-color: rgb(141, 110, 99);
max-width: 50%;
height: auto;
}
.container div:nth-child(even) {
background-color: orange;
}
.container div:nth-child(odd) {
background-color: purple;
}
<div class="container">
<div id="one">1
<div class="content-container"></div>
</div>
<div id="two">2
<div class="content-container">text</div>
</div>
<div id="three">3
<div class="content-container">text</div>
</div>
<div id="four">4
<div class="content-container">text</div>
</div>
<div id="five">5
<div class="content-container">text</div>
</div>
<div id="six">6
<div class="content-container">text</div>
</div>
</div>
You'll notice that #one and #three, and #two and #four, don't appear to be the same height. Actually, they are.
The issue is that you've set #three and #four to start spanning at grid row line 2.
Well, #one and #two are set to start at grid row line 1, and span 4 rows, so they are overlapping #three and #four (or vice versa). You would need to start #three and #four at grid row line 5.
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 100px 100px 100px 100px 100px;
grid-gap: 10px;
grid-auto-rows: 100px; /* added to accommodate more rows */
}
#one {
grid-row: 1 / span 4;
grid-column: 1;
}
#two {
grid-row: 1 / span 4;
grid-column: 2;
}
#three {
grid-row: 5 / span 4;
grid-column: 1;
}
#four {
grid-row: 5 / span 4;
grid-column: 2;
}
* {
font-family: Helvetica;
font-size: 1em;
color: white;
text-align: center;
}
img {
display: block;
margin: 20px 20px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
border-width: 5px;
border-style: solid;
border-color: rgb(141, 110, 99);
max-width: 50%;
height: auto;
}
.container div:nth-child(even) {
background-color: orange;
}
.container div:nth-child(odd) {
background-color: purple;
}
<div class="container">
<div id="one">1
<div class="content-container"></div>
</div>
<div id="two">2
<div class="content-container">text</div>
</div>
<div id="three">3
<div class="content-container">text</div>
</div>
<div id="four">4
<div class="content-container">text</div>
</div>
<div id="five">5
<div class="content-container">text</div>
</div>
<div id="six">6
<div class="content-container">text</div>
</div>
</div>