Not sure if what am I am trying to achieve is possible using css grid but the current implementation I have is not working. Below is the layout I am trying to achieve. The box in red spans two rows.
#wrapper {
display: grid;
grid-template-columns: repeat(5, 90px);
grid-auto-rows: 50px;
grid-gap: 5px;
width: 516px;
}
.wide {
grid-row: 1 / 4;
grid-column: 3 / 5;
background-color: red;
}
.block {
background-color: grey;
}
<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block wide"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
As said in the comment, you dont span 2 rows, you span 2 columns. Also you need to apply the class to the 1st element: .wide { grid-column: span 2; }
In your picture you also have a 6 column grid not a 5 column one
.grid {
display: grid;
grid-template-columns: repeat(6, 90px);
grid-auto-rows: 50px;
grid-gap: 5px;
}
.wide {
grid-column: span 2;
}
/* for styling purpose only */
.grid > div:nth-child(n+1) {
background-color: grey;
}
.grid > div:nth-child(1) {
background-color: brown;
}
<div class="grid">
<div class="wide"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>