Issue
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 class="gridandtitle">
<div class="grid-container">
<div class="shirt">
<div class="grid grid-1">
<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 class="art">
<div class="grid grid-2">
<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.
Solution
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 class="grid-container">
<div class="shirt">
<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 class="art">
<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>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.