CSS Grid行高设为指定尺寸整数倍的实现疑问

Hey there! Let's tackle that CSS Grid row height issue you're facing.

First, let's break down why your current mixin isn't working: you've set grid-auto-rows: 6*$row-gap, which locks every row to a fixed height. Any content that exceeds that height will overflow or stack because the row won't expand to fit it.

Here are two solutions depending on your exact needs:

Option 1: Approximate (Pure CSS, Flexible Rows) #

If you just need rows to be at least your specified m (6*$row-gap) and grow to fit taller content (without strictly enforcing integer multiples), update your mixin like this:

@mixin grid-container($cols: 6, $col-gap: 20px, $row-gap: 12px) {
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  // Use minmax to set a minimum row height of 6*$row-gap, auto expands to fit content
  grid-auto-rows: minmax(6*$row-gap, auto);
  grid-column-gap: $col-gap;
  grid-row-gap: $row-gap;
  align-items: start; // Prevents content from being stretched vertically
}

This way, short content gets the full m height, and taller content makes the row expand to fit it. The downside is rows won't strictly snap to integer multiples of m (e.g., a 73px tall item in a 72px m row will make the row 73px tall, not 144px).

Option 2: Strict Integer Multiples (CSS + JS) #

If you absolutely need rows to be exact integer multiples of m (so a 73px item forces the row to 144px, 145px forces it to 216px, etc.), you'll need a bit of JavaScript to calculate and set row spans dynamically.

First, update your mixin to define a CSS variable for the base row height and set fixed row heights:

@mixin grid-container($cols: 6, $col-gap: 20px, $row-gap: 12px) {
  --base-row-height: #{6*$row-gap}; // Store base height as a CSS variable
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  grid-auto-rows: var(--base-row-height); // Each row is exactly m tall
  grid-column-gap: $col-gap;
  grid-row-gap: $row-gap;
}

Then add this JavaScript to calculate how many rows each item needs to span:

document.addEventListener('DOMContentLoaded', function() {
  // Target all your grid containers (adjust the selector to match your class)
  const gridContainers = document.querySelectorAll('.grid-container');
  
  gridContainers.forEach(container => {
    const baseHeight = parseInt(getComputedStyle(container).getPropertyValue('--base-row-height'));
    // Target all grid items inside the container
    const items = container.querySelectorAll('.grid-item');
    
    items.forEach(item => {
      // Calculate how many rows the item needs to span
      const itemHeight = item.offsetHeight;
      const spanCount = Math.ceil(itemHeight / baseHeight);
      // Set the row span to make the item take up enough rows
      item.style.gridRowEnd = `span ${spanCount}`;
    });
  });
});

Note: If your content updates dynamically (like loading new data or user input), you'll want to re-run this JS function after the content changes to update the row spans.

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