我把一个图像放在一个响应式CSS网格中，它只在移动视图中看起来很好，但在桌面视图中，图像相互重叠。

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-auto-rows: auto;
  margin: 0;
  max-width: 1000px;
  gap: 20px;
}

.posts * {
  box-sizing: border-box;
}

.post {
  font-family: montserrat;
  text-decoration: none;
  color: #000;
  margin: 2.5px 5px;
  width: 280px;
}

.postthumb {
  width: 280px;
  height: 200px;
  margin: 0;
}

.posttitle {}

<代码><；DIV类=“网格”>；<；主要>；<；DIV类=“帖子”>；<；a href=“#” target=“_空白”类=后>；<；IMG SRC=“ https：//via.placeholder.com/150/0000ff/808080.com ” alt=“ ” Class=“ PostThumb ”>；<；H3 Class=“ PostTitle ”>；Hello World是这篇文章的标题<；/H3>；<；/a>；<；A HREF=“#” TARGET=“_空白” CLASS=后期>；<；IMG SRC=“ https：//via.placeholder.com/150/ff0000/808080.com ” alt=“ ” Class=“ PostThumb ”>；<；H3 Class=“ PostTitle ”>；Hello World是这篇文章的标题<；/H3>；<；/a>；<；/DIV>；<；/main>；<；/DIV>；

顺晟科技：

问题是：<div class="grids"> <main> <div class="posts"> <a href="#" target="_blank" class=post> <img src="https://via.placeholder.com/150/0000FF/808080.com" alt="" class="postthumb"> <h3 class="posttitle">Hello World is the title of this Post</h3> </a> <a href="#" target="_blank" class=post> <img src="https://via.placeholder.com/150/FF0000/808080.com" alt="" class="postthumb"> <h3 class="posttitle">Hello World is the title of this Post</h3> </a> </div> </main> </div>

这条线覆盖了图像的宽度，使其可能大于网格列。因此，当列小于280px时，图像重叠。

.post { width: 280px; }

<代码><；DIV类=“网格”>；<；主要>；<；DIV类=“帖子”>；<；A HREF=“#” TARGET=“_空白” CLASS=后期>；<；IMG SRC=“ https：//via.placeholder.com/150/0000ff/808080.com ” alt=“ ” Class=“ PostThumb ”>；<；H3 Class=“ PostTitle ”>；Hello World是这篇文章的标题<；/H3>；<；/a>；<；A HREF=“#” TARGET=“_空白” CLASS=后期>；<；IMG SRC=“ https：//via.placeholder.com/150/ff0000/808080.com ” alt=“ ” Class=“ PostThumb ”>；<；H3 Class=“ PostTitle ”>；Hello World是这篇文章的标题<；/H3>；<；/a>；<；/DIV>；<；/main>；<；/DIV>；

我已经想通了：）

它在：

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-auto-rows: auto;
  margin: 0;
  max-width: 1000px;
  gap: 20px;
}

.posts * {
  box-sizing: border-box;
}

.post {
  font-family: montserrat;
  text-decoration: none;
  color: #000;
  margin: 2.5px 5px;
}

.postthumb {
  height: 200px;
  margin: 0;
}

.posttitle {}

最小最大值仅为<div class="grids"> <main> <div class="posts"> <a href="#" target="_blank" class=post> <img src="https://via.placeholder.com/150/0000FF/808080.com" alt="" class="postthumb"> <h3 class="posttitle">Hello World is the title of this Post</h3> </a> <a href="#" target="_blank" class=post> <img src="https://via.placeholder.com/150/FF0000/808080.com" alt="" class="postthumb"> <h3 class="posttitle">Hello World is the title of this Post</h3> </a> </div> </main> </div>，但图像宽度为grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); 。因此我需要将最小最大值从<div class="grids"> <main> <div class="posts"> <a href="#" target="_blank" class=post> <img src="https://via.placeholder.com/150/0000FF/808080.com" alt="" class="postthumb"> <h3 class="posttitle">Hello World is the title of this Post</h3> </a> <a href="#" target="_blank" class=post> <img src="https://via.placeholder.com/150/FF0000/808080.com" alt="" class="postthumb"> <h3 class="posttitle">Hello World is the title of this Post</h3> </a> </div> </main> </div>增加到grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); 。谢谢：）