css grid-row and grid-column

Question

Hi I'm learning css grid but I can't undertand this result. I use the class span-row-3 with grid-row: span 3; when I use it alone it works like for item 1 but when I use it with a span-col-3 it didn't work anymore like in Item 6

Is there any reason why my grid-row: span 3; isn't working here

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}
.span-col-3{grid-column: span 3;}

.span-row-3{grid-row: span 3;}
.grid div {
    font-weight: 300;
    font-size: .8rem;
    line-height: 1.2;
    text-align: left;
    position: relative;
    background: #302742;
    border-left: 2px solid #ffffff4d;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
    padding: 2rem 1rem;
    color: #ffffff80;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<div class="grid">
  <div class="span-row-3">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div class="span-col-3 span-row-3">Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
</div>

Answer 1

Everything works fine - the problem is your rows do not have equal height. Set grid-auto-rows to specify the size of grid-row:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 10px;
}

.span-col-3 {
  grid-column: span 3;
}

.span-row-3 {
  grid-row: span 3;
}

.grid div {
  font-weight: 300;
  font-size: .8rem;
  line-height: 1.2;
  text-align: left;
  position: relative;
  background: #302742;
  border-left: 2px solid #ffffff4d;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
  padding: 2rem 1rem;
  color: #ffffff80;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="grid">
  <div class="span-row-3">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div class="span-col-3 span-row-3">Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
</div>

Answer 2

You have missed out "span-col-3" for item1

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}
.span-col-3{grid-column: span 3;}

.span-row-3{grid-row: span 3;}
.grid div {
    font-weight: 300;
    font-size: .8rem;
    line-height: 1.2;
    text-align: left;
    position: relative;
    background: #302742;
    border-left: 2px solid #ffffff4d;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
    padding: 2rem 1rem;
    color: #ffffff80;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<div class="grid">
  <div class="span-col-3 span-row-3">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div class="span-col-3 span-row-3">Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
</div>

Answer 3

The problem is that grid-auto-rows is set to auto, by default.

With auto, grid items are sized relative to other items in the same track.

Item1 shares two rows with other items.

Item6 doesn't share the row with any other item.

Hence, their auto sizes are different.

As mentioned in another answer, defining a length on grid-auto-rows resolves the problem. There may be other methods.