Grid是网格线/列，表示单元格对齐。
如果你想要这个平移，你必须先定义一个网格。2使偶数单元格是相对的，而单元格中的div是绝对的。3在它上面你可以应用这个平移。

* {
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  background-color: #131313;
  font-family: sans-serif;
}

#container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
}

#container>div {
  min-height: 300px;
  position: relative;
  padding: 1em;
}

#container>div:nth-child(even)>div {
  background-color: lightgrey;
  position: absolute;
  width: calc(100% - 2em);
  transform: translateY(100px);
  z-index: 1;
}

#div1 {
  background-color: rgba(128, 135, 81, 0.5);
}

#div2 {
  background-color: rgba(147, 0, 65, 0.5);
}

#div3 {
  background-color: rgba(111, 6, 26, 0.5);
}

#div4 {
  background-color: rgba(37, 65, 97, 0.5);
}

<div id="container">
  <div id="div1">
    <div>
      <img src="https://picsum.photos/id/237/200/200">
      <br> Urna neque viverra justo nec. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Viverra aliquet eget sit amet tellus. Nullam non nisi est sit amet. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Dapibus ultrices
      in iaculis nunc. Suspendisse potenti nullam ac tortor.
    </div>
  </div>
  <div id="div2">
    <div>
      <img src="https://picsum.photos/id/124/200/200">
      <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div id="div3">
    <div>
      <img src="https://picsum.photos/id/87/200/200">
      <br> Nisl nisi scelerisque eu ultrices vitae. Erat pellentesque adipiscing commodo elit at imperdiet dui. Nulla facilisi cras fermentum odio eu. At imperdiet dui accumsan sit amet nulla facilisi. Ullamcorper sit amet risus nullam eget felis. Ultrices
      sagittis orci a scelerisque purus semper eget duis. Eu facilisis sed odio morbi. Dui accumsan sit amet nulla. Quisque id diam vel quam elementum pulvinar etiam non. Praesent semper feugiat nibh sed pulvinar proin gravida.
    </div>
  </div>
  <div id="div4">
    <div>
      <img src="https://picsum.photos/id/111/200/200">
      <br> In hac habitasse platea dictumst quisque sagittis purus sit amet. Ut diam quam nulla porttitor. Sit amet consectetur adipiscing elit ut aliquam purus sit. Malesuada pellentesque elit eget gravida cum sociis. Eu nisl nunc mi ipsum faucibus vitae
      aliquet. Sit amet volutpat consequat mauris nunc congue nisi. Libero justo laoreet sit amet.
    </div>
  </div>
</div>