Html CSS网格中的重叠项

我正试图通过让两个元素彼此重叠一半来实现css网格的响应式布局。在宽屏幕上，它们排成一行并水平重叠，但在窄屏幕上，它们应排成一列并垂直重叠

以下是我试图实现的目标的示例：

css网格是否可能出现这种行为？这里是我走了多远，但现在我被困在试图获得垂直重叠

CSS HTML

标题文本在这里

在CSS网格中，您可以创建重叠的网格区域

Grid通过基于线的放置使此操作简单易行

根据规范：

网格行开始

，

网格列开始

，

网格行结束

，以及

网格列结束

属性确定网格项的大小和位置 通过贡献直线、跨距或不贡献任何内容在栅格内（自动） 到其网格位置，从而指定内联起点， 其栅格区域的块开始、内联结束和块结束边缘

注意：重新调整下面演示的大小，以便从桌面视图过渡到移动视图

文章{
显示：网格；
网格模板列：重复（6，1fr）；
网格自动行：50px；
网格间距：5px；
}
节：第n个子（1）{网格列：1/4；网格行：1；z索引：1；}
节：第n个子（2）{网格列：3/5；网格行：1；}
节：第n个子（3）{网格列：5/7；网格行：1；}
@介质（最大宽度：500px）{
文章{网格模板列：100px；调整内容：中心；}
节：第n个子（1）{网格行：1/4；网格列：1；}
节：第n个子（2）{网格行：3/5；网格列：1；}
节：第n个子（3）{网格行：5/7；网格列：1；}
}
/*非必要的演示样式*/
节：第n个子（1）{背景色：浅绿色；}
节：第n个子（2）{背景色：橙色；}
部分：第n个子（3）{背景色：浅绿色；}
部分{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：1.2米；
}

1.
2.
3.

@PacoGómezCapón我需要使用css网格来实现这一点，以便为CMS中的作者提供灵活性。然而，媒体查询的想法让我找到了目前可以接受的解决方案。我非常可行，但您可能需要使用

z-index

。

.wrapper {
  background: white;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(444px, 1fr));
}

.wrapper__red, .wrapper__green {
  align-self: center;
}

.wrapper__red {
  z-index: 1;
  background: red;
}

.wrapper__green {
  justify-self: end;
  height: 100%;
  background: green;
}

<div class="wrapper">
  <h1 class="wrapper__red">Title text goes here</h1>
  <img class="wrapper__green" src="/a.jpg" />
</div>