~~~
<style>
.conter {
display: grid;
/* grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(2, 300px); */
grid:repeat(2, 300px)/repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 5px;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="conter">
<div class="item1"><img src="images/现代.png" alt=""></div>
<div class="item1"><img src="images/现代.png" alt=""></div>
<div class="item1"><img src="images/现代.png" alt=""></div>
<div class="item1"><img src="images/现代.png" alt=""></div>
<div class="item1"><img src="images/现代.png" alt=""></div>
<div class="item1"><img src="images/现代.png" alt=""></div>
<div class="item1"><img src="images/现代.png" alt=""></div>
<div class="item1"><img src="images/现代.png" alt=""></div>
</div>
</body>
~~~
