用CSS Grid模拟inline-block，避免网格单元格占用多余空白空间

我完全懂你碰到的麻烦：用inline-block处理动态内容时，换行很容易乱成一团；换成CSS Grid后，原本想用repeat搭配minmax()实现自适应列数，结果单元格却强行填充空白，大屏上元素间距拉得过大。你想要的是——单元格最小宽度刚好能装下自身内容，最大不超过屏幕宽度的1/4，而且换行时必须对齐网格线，对吧？

核心解决方案：调整minmax()参数+控制网格对齐方式 #

直接给你修改后的SCSS代码，我会一步步解释关键改动：

.SideBySideContainer {
  > div {
    border: 1px solid red;
    padding: 1em;
  }
}

@media all and (max-width: 899px) {
  /* 小屏逻辑保留，后续可以加@supports做Grid支持检测优化 */
  .SideBySideContainer {
    > div {
      display: inline-block;
      vertical-align: top;
    }
    > div:not(:last-of-type) {
      margin-right: 1em;
    }
    > div:first-of-type {
      max-width: calc(50% - 2em);
    }
  }
}

@media all and (min-width: 900px) {
  .SideBySideContainer {
    display: grid;
    grid-gap: 1em;
    grid-auto-flow: dense;
    grid-auto-rows: minmax(5em, auto);
    justify-content: start; /* 关键：让网格从左侧开始排列，避免右侧空白 */
    
    &.FourCols {
      /* 核心修改：用min-content做最小宽度，25%限制最大宽度 */
      grid-template-columns: repeat(auto-fill, minmax(min-content, 25%));
    }
  }
}

关键改动说明 #

1. minmax(min-content, 25%) 替换固定尺寸

   • min-content会让单元格自动收缩到刚好容纳内容的最小宽度，完美适配你的动态内容需求，不会出现比内容宽的多余空白。
   • 25%严格限制了单元格最大宽度为屏幕的1/4，刚好符合你“最大为屏幕宽度四分之一”的要求。

2. 添加justify-content: start
   默认情况下，CSS Grid会把所有单元格在容器中居中分布，大屏上右侧会出现大片空白。加上这个属性后，网格会从容器左侧开始排列，完全贴合你的排版需求。

3. 告别固定最小宽度
   之前的10em固定最小宽度是问题根源之一——如果内容比10em窄，单元格会强行扩展到10em，导致多余空白。换成min-content后，单元格尺寸完全由内容决定，同时保留最大宽度限制。

为什么其他方案不行？ #

• inline-block：动态内容换行时，不同高度的元素容易错位，而且没法保证严格的网格对齐。
• inline-flex：即使设置了flex-wrap: wrap，也很难像Grid一样实现规整的网格对齐；内容过长时还容易超出容器边界，或者把元素推出屏幕，这都是flex布局在规整网格场景下的局限。

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