Hey there! Great news—we can absolutely eliminate those annoying gaps using pure CSS, no extra tools or scripts required. Let’s break down why the gaps are showing up first, then fix the code to get your grid looking clean.

Why the Gaps Are Happening #

Your current setup has a few conflicting rules that create those unintended gaps:

• grid-template-rows: repeat(auto-fill, minmax(80px, 0)) uses rigid auto-fill logic that doesn’t play nicely with items spanning multiple rows/columns.
• justify-content: space-evenly forces extra space to be distributed evenly across the grid, which gets messed up when some items take up more space than others.

Pure CSS Solution #

Here’s the adjusted code that fixes the gaps while preserving your desired 2x2 span effect for specific items:

Updated HTML (no changes needed here!) #

<div class="image-canvas">
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <div class='placeholder'></div>
  <!-- Add more placeholders as needed -->
</div>

Updated CSS #

.image-canvas {
  height: 500px;
  display: grid;
  /* Fixed column size with auto-fill for consistent alignment */
  grid-template-columns: repeat(auto-fill, 80px);
  /* Auto-create rows matching your base item height */
  grid-auto-rows: 80px;
  /* Remove forced spacing; let items align naturally */
  justify-content: start;
  /* Keep your intentional spacing between items */
  gap: 5px;
  /* Optional: Add scroll if items exceed the 500px height */
  overflow-y: auto;
}

.placeholder:nth-child(3n+2) {
  grid-row: span 2;
  grid-column: span 2;
}

/* Optional: Add styling to visualize placeholders clearly */
.placeholder {
  background-color: #e0e0e0;
  border-radius: 4px;
}

Key Changes Explained #

• grid-template-columns: Swapped minmax(0, 80px) for a fixed 80px to ensure every column has the same width, preventing misalignment gaps.
• grid-auto-rows: Replaced the inflexible row template with auto-rows set to 80px. This lets the grid create rows on demand, matching the height of your items and avoiding empty row gaps.
• justify-content: Changed from space-evenly to start to stop the grid from forcing extra space between columns. If you want the grid to fill the full container width, you could use grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) instead—this will adjust column sizes to fit the space without gaps.
• gap: Kept your original 5px spacing for intentional gaps between items—this will be the only spacing you see now.

This setup will give you a clean, gap-free grid while retaining the 2x2 span effect for every 3rd item (starting from the 2nd one).

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