CSS grid span row to all rows

Question

I want to make like this layout. but I can not make the .head element full rows. I also try with grid-row: 1 / 6, but it is not responsive when width change it not properly span rows. grid-column: 1 / -1 working fine grid-row: 1 / -1 this not working.

.mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(91px, 1fr));
  grid-gap: 4px;
}

.head {
  background: blue;
  font-weight: bold;
  color: #fff;
  grid-row: 1 / -1;
}

.item {
  background: red;
}

<div class="mgrid">
  <div class="head">My Text</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

Answer 1

You can solve this using position: absolute

.mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(91px, 1fr));
  grid-gap: 4px;
  padding-left: 95px; /* 91px + gap */
  position: relative;
}

.head {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 91px; /* same as the template */
  background: blue;
  font-weight: bold;
  color: #fff;
}

.item {
  background: red;
}

<div class="mgrid">
  <div class="head">My Text</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>