求助：如何让图片完全适配CSS Grid网格项

Hey there! Let's get those images fitting perfectly into your CSS Grid items. I see the issue right away—your current setup has padding on the grid items that's preventing the images from filling the full cell, and we need to make sure the grid cells have consistent sizing for the images to adapt properly.

What's Causing the Problem? #

• Your .grid-item has padding: 40px which takes up space inside the cell, so the image can't stretch to the edges of the grid item's background.
• The grid items don't have a defined height, which can lead to inconsistent sizing and images not filling the cell properly.

Here's the Fixed CSS Code #

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #8B38BE;
  padding: 70px;
  margin: auto;
  width: 700px;
  /* Add gap to create clean spacing between grid items */
  gap: 2px;
}

.grid-item {
  background-color: #E0E7FF;
  border: 1px solid black;
  /* Remove padding that was pushing the image inward */
  /* padding: 40px; */
  /* Set fixed height to match column width (700px container - 140px padding = 560px /7 columns = 80px) */
  height: 80px;
  /* Use flexbox to center images perfectly */
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item > img {
  /* Make image fill the entire grid item while preserving aspect ratio */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Key Changes Explained: #

1. Removed grid item padding: This lets the image take up the full space of the grid cell. We replaced the spacing with gap on the grid container—this is the standard, cleaner way to add space between grid items.
2. Set consistent grid item height: Since your container is 700px wide minus 140px of horizontal padding, each column is 80px wide. Matching the height to 80px creates perfect square grid cells, which helps images fit neatly.
3. Flexbox for centering: Using flexbox ensures images stay centered without relying on padding, and works even if the image is smaller than the cell.
4. Image sizing tweaks: Setting both width and height to 100% with object-fit: cover makes the image fill the entire cell without stretching or squishing its aspect ratio.

If you want larger or smaller grid cells, just adjust the container width or grid-template-columns value, then update the .grid-item height to match the calculated column width.

内容的提问来源于stack exchange，提问作者ggs