aliginment and position issues when using display grid-CodePudding

I have 2 parent containers in my code below. The first one is just for reference for what I want my second container to look like. The difference between the two is the first one I used absolute positioning and flex display but the second one is grid display. What I'm stuck on is understanding how to center class .item1 and position class .item2 all the way to the right just how it's like on the first parent container i.e class .topAdCon. My specific questions are 1) how to center .item1 2) how to set .item2's position all the way to the right (right: 0%) 3) on the first parent container I just set top: 0% to align it all the way to the top because it has absolute positioning how can I set the positioning of the second parent container where ever I want currently I'm using margin-top for top positioning is that the way to go or what is the right way? 4) Lastly how do I set the height for the second container because height isn't responding as it does on the first container?

Note: I commented out things I tried in order to achieve these things but they aren't working.

* {
  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 >
  <div >
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div >
    <p>this is test statement 1</p>
  </div>
</div>

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

CodePudding user response：

* {
  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 >
  <div >
    <img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
  </div>
  <div >
    <p>this is test statement 1</p>
  </div>
</div>

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