Overlapping images in html-CodePudding

I put an image inside a responsive CSS grid and it looks fine only in mobile view but in desktop view the images overlap each another.

.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 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>

CodePudding user response：

The issue is: .postthumb { width: 280px; }

That line overwrites the width of the image and making it possibly larger then the grid-column. As such the images overlap when the column is smaller then 280px.

Same goes for .post { width: 280px; } this will extend the ehader line possibly alrger then the grid-column and overlap the heading.

.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>

CodePudding user response：

I already figured it out thanks to all:) Its on the: grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));

The minmax is only 225px but the image width is 280px. So I needed to increase the minmax from 225px to 280px. Thanks :)