CSS Grid中重叠的项目

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网格中，您可以创建重叠的网格区域。

Grid使用基于行的展示位置使这简单易行。

来自规范：

  

8.3. Line-based Placement

     

grid-row-start，grid-column-start，grid-row-end和   grid-column-end属性确定网格项的大小和位置   通过贡献一条线，一个跨度或什么都没有（自动）在网格内   到它的网格放置，从而指定内联开始，   网格区域的块起始，内联结束和块结束边缘。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle demo