css - 除了第一行的最后一列之外的所有地方的 CSS GRID 内容

Question

假设有一个场景，您有一个包含 3 列和 2 行的网格，如下所示：

<div class="wrapper">
  <div class="content"></div>
  <div class="info"></div>
</div>

元素有这些简单的样式：

.wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 400px;
  grid-template-rows: 400px auto;
}

.content {
  grid-column: 1/4;
  grid-row: 1/3;
}

.info {
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
}

这会将.content元素的内容填充到整个.wrapper可用空间，并且.info元素将绝对定位在右上角。

是否可以将内容显示.content到除右上角单元格之外的所有内容中 - 像这样（红色是内容所在的位置）：

标签： cssflexboxcss-grid