grid item span won't span more than 1 column

Question

The orange box won't span more than one column no matter what I set the "grid-column" to be.

Why is that?

I have tried the following: combinations: (It's the .hr-3 item)

grid-column: 6 / span 9; grid-column: 6 / 9; grid-column: 2 / 7; grid-column: 2 / span 9;

I triple checked that I am targeting the right item.

Nothing seems to work..

@import url('https://fonts.googleapis.com/css?family=Montserrat|Teko');
html, body {
  background: transparent;
  width: 100%;
  height: 100%;
}
#a {
  margin: 50px 0 0 50px;
  width: 70%;
  height: 70%;
  background: rgb(250,250,250);
  display: grid;
  grid-template-columns: auto auto 1px auto repeat(6, 2fr);
  grid-template-rows: auto repeat(9,1fr);
  //transform: rotate(-45deg);
  grid-gap: 5px;
}
.item {
  //background: rgba(100,100,0,0.02);
  font-family: 'Montserrat', sans-serif;
}
.item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.item-2 {
  grid-column: 2 / 3;
  grid-row: 1 / span 3;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
  padding-top: 3px;

}
.item-3 {
  grid-column: 4 / 5;
  grid-row: 1 / span 3;
   writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
  padding-top: 3px;
}
.item-4 {
  grid-column: 5 / 6;
  grid-row: 1 / 1;
  
}
.hr-1 {
  grid-column: 3 / 4;
  grid-row: 2 / span 3;
  background: rgba(0,0,0,0.9);
}
.hr-2 {
  grid-column: 6 / 7;
  grid-row: 1 / span 8;
  border-left: 25px solid red;
 
}
.hr-3 {
  grid-column: 6 / span 9;  // <------- DOESN'T WORK?
  grid-row: 6/8;
  border: 25px solid orange;
}

<div id="a">
  <div class="item item-1"><b>John</b></div>
  <div class="item item-2"><b>A</b>lexander</div>
  <hr class="hr-1"/>
  <div class="item item-3"><b>B</b>lue</div>
  <div class="item item-4"><b>Peterson</b></div>
  <div class="item item-5"></div>
  <hr class="hr-2"/>
  <hr class="hr-3"/>
  <hr class="hr-4"/>
</div>

Answer 1

hr has a default margin set that is creating the issue. Make them equal to 0.

The default margin is set to auto so it's aligning your item (an empty one) inside the track which make you think your element isn't spaning the needed columns. What you will see in all the case is the 50px border you made (left+right)

@import url('https://fonts.googleapis.com/css?family=Montserrat|Teko');
html, body {
  background: transparent;
  width: 100%;
  height: 100%;
}
#a {
  margin: 50px 0 0 50px;
  width: 70%;
  height: 70%;
  background: rgb(250,250,250);
  display: grid;
  grid-template-columns: auto auto 1px auto repeat(6, 2fr);
  grid-template-rows: auto repeat(9,1fr);
  //transform: rotate(-45deg);
  grid-gap: 5px;
}
.item {
  //background: rgba(100,100,0,0.02);
  font-family: 'Montserrat', sans-serif;
}
.item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.item-2 {
  grid-column: 2 / 3;
  grid-row: 1 / span 3;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
  padding-top: 3px;

}
.item-3 {
  grid-column: 4 / 5;
  grid-row: 1 / span 3;
   writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
  padding-top: 3px;
}
.item-4 {
  grid-column: 5 / 6;
  grid-row: 1 / 1;
  
}
.hr-1 {
  grid-column: 3 / 4;
  grid-row: 2 / span 3;
  background: rgba(0,0,0,0.9);
}
.hr-2 {
  grid-column: 6 / 7;
  grid-row: 1 / span 8;
  border-left: 25px solid red;
 
}
.hr-3 {
  grid-column: 6 / span 9;
  grid-row: 6/8;
  border: 5px solid orange;
}

hr {
 margin:0;
}

<div id="a">
  <div class="item item-1"><b>John</b></div>
  <div class="item item-2"><b>A</b>lexander</div>
  <hr class="hr-1"/>
  <div class="item item-3"><b>B</b>lue</div>
  <div class="item item-4"><b>Peterson</b></div>
  <div class="item item-5"></div>
  <hr class="hr-2"/>
  <hr class="hr-3"/>
  <hr class="hr-4"/>
</div>

Here is what you can see using the dev tools and by keeping the default margin:

You can see that the element is taking 9 column and 2 rows and the margin is centering everything inside.