如何让CSS Grid中.head元素跨所有行实现响应式布局？

我想实现如图所示的布局，但没法让.head元素跨所有行显示。试了grid-row: 1 / 6，但宽度变化时不能自适应跨所有行；grid-column: 1 / -1能正常工作，可grid-row: 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>

解决方法 #

问题出在你用了repeat(auto-fill, minmax(91px, 1fr))作为唯一列规则，这会让.head和所有.item被纳入同一自动填充列体系，导致grid-row: 1 / -1无法正确跨所有行。

调整网格列布局，给.head单独分配一列，剩余列保留自动填充逻辑即可：

.mgrid {
  display: grid;
  /* 第一列自适应.head内容宽度，剩余列自动填充 */
  grid-template-columns: auto repeat(auto-fill, minmax(91px, 1fr));
  grid-gap: 4px;
}

.head {
  background: blue;
  font-weight: bold;
  color: #fff;
  /* 跨所有行 */
  grid-row: 1 / -1;
}

.item {
  background: red;
}

修改后，.head会固定在第一列，自动拉伸高度匹配右侧所有.item组成的网格高度，无论窗口宽度如何变化，都能保持跨所有行的效果。

内容的提问来源于stack exchange，提问作者Abhijit