CSS网格将行扩展到所有行[重复]

vatpfxk5 于 2023-05-23 发布在其他

关注(0)|答案(1)|浏览(111)

此问题已在此处有答案：

Make a grid item span to the last row / column in implicit grid（5个答案）
2天前关闭。

我想做成这样的布局。但是我不能使.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>

css

来源：https://stackoverflow.com/questions/76297106/css-grid-span-row-to-all-rows

1条答案

按热度按时间

d7v8vwbk1#

您可以使用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>

赞(0）回复(0）举报 2023-05-23

我来回答

CSS网格将行扩展到所有行[重复]

1条答案

相关问题

热门标签

最新问答