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>

not able to find the duplicate but you either use grid-row: 1/99 (and replace the gap with margin) or consider position: absolute — Temani Afif, May 20 '23 at 20:04
If you're okay to nest one grid within another, then that would seem the easiest solution: [demo](https://jsfiddle.net/davidThomas/ogc78fte/), but I will admit that it's non-ideal. — David Thomas, May 20 '23 at 22:25

score 1 · Accepted Answer · answered May 20 '23 at 20:06

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>

@Abhijit if you are able to adjust the HTML then it's another story, we have a ton of different ways to do this — Temani Afif, May 20 '23 at 20:17

CSS grid span row to all rows

1 Answers1