CSS网格中的重叠项目

Question

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

这是我要实现的目标的说明：

CSS网格是否可能出现这种现象？这是我所走的距离，但现在我想尝试获得垂直重叠。

的CSS

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

的HTML

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

Answer 1

在CSS网格可以创建重叠网地区。

网格使基于行的放置变得简单而容易。

从规格：

8.3。基于行的展示位置

的grid-row-start，grid-column-start，grid-row-end，和 grid-column-end属性确定网格内的网格项的大小和位置通过贡献一条线，一个跨度，或全无（自动），以它的网格位置，从而指定直列开始，块启动，直列端，和其网格区域的块的端部边缘。

注意：请重新调整以下演示的大小，以从桌面视图转换为移动视图

article {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

section:nth-child(1) { grid-column: 1 / 4; grid-row: 1; z-index: 1; }
section:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
section:nth-child(3) { grid-column: 5 / 7; grid-row: 1; }

@media ( max-width: 500px ) {
   article { grid-template-columns: 100px; justify-content: center; }
   section:nth-child(1) { grid-row: 1 / 4; grid-column: 1; }
   section:nth-child(2) { grid-row: 3 / 5; grid-column: 1; }
   section:nth-child(3) { grid-row: 5 / 7; grid-column: 1; }
}

/* non-essential demo styles */
section:nth-child(1) { background-color: lightgreen; }
section:nth-child(2) { background-color: orange; }
section:nth-child(3) { background-color: aqua; }
section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

<article>
  <section><span>1</span></section>
  <section><span>2</span></section>
  <section><span>3</span></section>
</article>

jsFiddle演示