如何用CSS Grids创建瀑布流布局及网格项高度变化适配

Great questions! Let's break this down step by step to solve both your CSS Grid masonry needs.

First off, CSS Grid has an experimental masonry value for grid-template-rows that’s purpose-built for this exact layout. It’s not fully supported everywhere yet, but it works seamlessly in modern browsers with the right prefixes. Here’s a straightforward example:

.masonry-grid {
  display: grid;
  /* Create responsive columns that auto-fill the container */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* Enable native masonry flow for rows */
  grid-template-rows: masonry;
  /* Add Firefox prefix for compatibility */
  grid-template-rows: -moz-masonry;
  gap: 1rem; /* Space between grid items */
}

.masonry-item {
  padding: 1rem;
  background: #f0f0f0;
  border-radius: 4px;
}

<div class="masonry-grid">
  <div class="masonry-item" style="height: 200px;">Item 1</div>
  <div class="masonry-item" style="height: 300px;">Item 2</div>
  <div class="masonry-item" style="height: 150px;">Item 3</div>
  <div class="masonry-item" style="height: 250px;">Item 4</div>
  <div class="masonry-item" style="height: 180px;">Item 5</div>
</div>

If you need broader browser support (since masonry is still experimental), you can use a lightweight JavaScript fallback or leverage grid-auto-flow: dense with manually assigned row spans—but the native masonry approach is by far the cleanest when it’s an option.

By default, CSS Grid places items in order without backfilling gaps—so if an item’s height changes, you might end up with empty space. To fix this, you’ll want to add grid-auto-flow: dense to your grid container. This tells Grid to fill in any available gaps with subsequent items as they reflow.

Combine this with the masonry setup (or even a regular grid), and items will automatically shift up when another item’s height changes. Here’s a working example with a dynamic height toggle:

.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  grid-template-rows: -moz-masonry;
  grid-auto-flow: dense; /* This is the key to filling gaps */
  gap: 1rem;
  margin-bottom: 2rem;
}

.dynamic-item {
  padding: 1rem;
  background: #e0e0e0;
  border-radius: 4px;
  transition: height 0.3s ease; /* Smooth height transition */
}

<div class="dynamic-grid">
  <div class="dynamic-item" id="resizable-item" style="height: 200px;">Click the button below to change my height!</div>
  <div class="dynamic-item" style="height: 300px;">Item 2</div>
  <div class="dynamic-item" style="height: 150px;">Item 3</div>
  <div class="dynamic-item" style="height: 250px;">Item 4</div>
  <div class="dynamic-item" style="height: 180px;">Item 5</div>
</div>

<button onclick="toggleHeight()">Toggle Item Height</button>

<script>
  function toggleHeight() {
    const item = document.getElementById('resizable-item');
    // Toggle between two heights to trigger reflow
    item.style.height = item.style.height === '200px' ? '400px' : '200px';
  }
</script>

When you click the button to adjust the first item’s height, you’ll see the other items automatically reflow and fill any gaps that open up. The grid-auto-flow: dense property is crucial here—it ensures Grid doesn’t leave empty spaces when items shift position.

A quick note: If you’re not using the experimental masonry layout (and are using regular grid rows), grid-auto-flow: dense still works. Just make sure to set grid-auto-rows: min-content or a similar value to let rows adjust to content size smoothly.

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