How to make two Grids overlap and line up and response to size change?-CodePudding

I am trying to use grid both for the shirts and art to be in the center of the viewport, also when I shring the browser window only the art responses to shrinkage and not the shirts, I like the whole thing to be 70% of the viewport but I am not sure what am I doing wrong, I have been reading all day but I can't fix it.

.gridandtitle {
  position: absolute;
  top: 25%;
  width: 70vw;
  height: 33vh;

}
.grid{
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 16px;
    justify-items: center;
   }
      
.grid-1 {
    overflow:hidden;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -o-object-fit: fill;
    object-fit: fill;
}

.grid-2 {
    overflow: hidden;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -o-object-fit: fill;
    object-fit: fill;
  
}
.art {
   margin-top: -300px;
  
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    </head>
<body>
<div >
 <div >
    <div >
        <div >
            <img src="https://i.imgur.com/oS8QWPI.png" >
            <img src="https://i.imgur.com/oS8QWPI.png" >





            <img src="https://i.imgur.com/oS8QWPI.png" >
        </div>
    </div>
 
    
    <div >
        <div >
            <img src="https://i.imgur.com/jeNzULX.png" height="150px">
            <img src="https://i.imgur.com/jeNzULX.png" height="150px">
            <img src="https://i.imgur.com/jeNzULX.png" height="150px">
        </div>
    </div>
 </div>  
</div>

    

    
</body>
</html>

I would appreciate any help.

CodePudding user response：

Your code is a bit complex. You can reduce it and simplify it like below:

.grid-container {
  display: grid;
}
.grid-container > * {
  grid-area: 1/1; /* shirt and art above each other */
  display: grid;
  grid-auto-flow: column; /* column flow so you can add as many image as you want */
  grid-auto-columns: 1fr; /* same width column */
  place-items: center; /* center everything */
}

.shirt img {
  max-width: 90%; /* controls the width of the shirt images */
}
.art img {
  max-width: 50%; /* controls the width of the art images  */
}

<div >
  <div >
    <img src="https://i.imgur.com/oS8QWPI.png">
    <img src="https://i.imgur.com/oS8QWPI.png">
    <img src="https://i.imgur.com/oS8QWPI.png">
  </div>
  <div >
    <img src="https://i.imgur.com/jeNzULX.png" >
    <img src="https://i.imgur.com/jeNzULX.png" >
    <img src="https://i.imgur.com/jeNzULX.png" >
  </div>
</div>