使用显示网格时的对齐和位置问题

Question

我下面的代码中有 2 个父容器。第一个仅供参考，我希望我的第二个容器看起来像什么。两者之间的区别是第一个我使用绝对定位和柔性显示，而第二个是网格显示。我所坚持的是理解如何将 class .item1 居中并定位 class .item2 一直到右边就像它在第一个父容器上的样子，即 class .topAdCon。我的具体问题是 1) 如何居中 .item1 2) 如何设置.item2's位置一直向右(right: 0%) 3）在第一个父容器上，我只是设置 top: 0% 将它一直对齐到顶部，因为它具有绝对定位我如何才能在我想要的地方设置第二个父容器的定位我目前正在使用边距- 顶部定位是要走的路还是正确的路？ 4) 最后，如何设置第二个容器的高度，因为 height 没有像在第一个容器上那样响应？

注意：我注释掉了我为实现这些目标而尝试过的东西，但它们不起作用。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.topAdCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  width: 100%;
  height: 18%;
  background-color: pink;
}

.topAdCon .adCon {
  width: 40%;
  height: 100%;
}

.topAdCon .adCon img {
  width: 100%;
  height: 100%;
}

.topAdCon .sideInfo {
  display: flex;
  text-align: center;
  width: 17%;
  height: 100%;
  position: absolute;
  right: 0%;
  border: 1.5px solid #000000;
}

.topAdCon .sideInfo p {
  font-size: 0.9vw;
  margin: auto;
}

.wrapper {
  display: grid;
  align-items: center;
  justify-content: center;
  /*position: relative;
  top: 20%;*/
  margin-top: 20%;
  grid-template-columns: 40% 17%;
  width: 100%;
  height: 18%;
  /*height not responding*/
  background-color: gold;
}

.item1 {
  /*align-self: center;*/
  width: 100%;
  height: 100%;
}

.item1 img {
  width: 100%;
  height: 100%;
}

.item2 {
  display: flex;
  text-align: center;
  /*align-self: flex-end*/
  width: 100%;
  height: 100%;
  border: 1.5px solid #000000;
}

.item2 p {
  font-size: 1.5vw;
  margin: auto;
}

<div class="topAdCon">
  <div class="adCon">
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div class="sideInfo">
    <p>this is test statement 1</p>
  </div>
</div>

<div class="wrapper">
  <div class="item1">
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div class="item2">
    <p>this is test statement 2</p>
  </div>
</div>

Answer 1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.topAdCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  width: 100%;
  height: 18%;
  background-color: pink;
}

.topAdCon .adCon {
  width: 40%;
  height: 100%;
}

.topAdCon .adCon img {
  width: 100%;
  height: 100%;
}

.topAdCon .sideInfo {
  display: flex;
  text-align: center;
  width: 17%;
  height: 100%;
  position: absolute;
  right: 0%;
  border: 1.5px solid #000000;
}

.topAdCon .sideInfo p {
  font-size: 0.9vw;
  margin: auto;
}

.wrapper {
  display: grid;
  margin-top: 20%;
  grid-template-columns: 30% 40% 12% 18%;
  grid-template-areas: 'item item1 item2 item3';
  width: 100%;
  height: 18vh;
  background-color: gold;
}

.item1 {
  width: 100%;
  height: inherit;
}

.item1 img {
  width: 100%;
  height: 100%;
}

.item3 {
  display: flex;
  text-align: center;
  justify-content: end;
  width: 100%;
  height: inherit;
  border: 1.5px solid #000000;
}

.item3 p {
  font-size: 1.5vw;
  margin: auto;
}

<div class="topAdCon">
  <div class="adCon">
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div class="sideInfo">
    <p>this is test statement 1</p>
  </div>
</div>

<div class="wrapper">
  <div class="item"></div>
  <div class="item1">
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div class="item2"></div>
  <div class="item3">
    <p>this is test statement 2</p>
  </div>
</div>

使用显示网格时的对齐和位置问题

aliginment and position issues when using display grid

html

css