我正在嘗試對襯衫和藝術使用網格，使其位于視口的中心，而且當我縮小瀏覽器視窗時，只有藝術對收縮的反應而不是襯衫，我喜歡整個事物是 70%視口，但我不確定我做錯了什么，我整天都在閱讀，但我無法修復它。
.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>我將不勝感激任何幫助。
uj5u.com熱心網友回復：
您的代碼有點復雜。您可以減少它并簡化它，如下所示：
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/535197.html
標籤：网页格式CSS网格