我想做出這樣的布局。但是我做不到。標題元素全行。我也嘗試使用grid-row: 1 / 6，但是當寬度改變時，它沒有響應，不能正確地跨越行。網格-列:1 / -1工作良好網格-行:1 / -1這不起作用。

.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>

你可以用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>