如何实现元素仅占自身所需空间的网格布局？求替代方案

嘿，我明白你遇到的问题了——Grid布局默认会把同一行里的所有元素都拉伸到该行最高元素的高度，这确实挺烦人的！你试的grid-auto-rows: auto其实本来就是Grid的默认值，所以没效果很正常。下面给你两个可行的解决方案：

方案一：用Grid布局快速解决 #

只需要给你的网格容器添加align-items: start属性，就能让每个网格项保持自身所需的高度，不会被强行拉伸：

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start; /* 这是关键！ */
}

原理说明： #

Grid容器的align-items属性控制网格项在**交叉轴（垂直方向）**上的对齐方式，默认值是stretch（拉伸），所以会让所有项填满行高；改成start后，每个项会沿着交叉轴的起始位置对齐，自然就保留了自身的高度。

方案二：Flex布局的修正方案 #

如果你之前尝试Flex布局没成功，那是因为Flex容器默认也会让子元素拉伸。只需要给Flex容器添加align-items: start，或者给每个子元素设置align-self: start即可：

.gallery-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: start; /* 直接给容器设置，所有子元素都会生效 */
}

.gallery-flex > * {
  flex: 0 0 25%; /* 对应4列布局，固定宽度占比 */
  /* 或者单独给子元素设置 align-self: start; */
}

额外说明：如果需要瀑布流布局 #

如果你想要的是不同高度的元素错落排列（类似Pinterest的瀑布流），那单纯的Grid/Flex默认布局做不到。这时候可以尝试：

• CSS Grid的实验性masonry布局（注意兼容性，需要加前缀）：

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: masonry;
    -webkit-grid-template-rows: masonry;
  }
  

• 或者使用成熟的JavaScript库来实现更稳定的瀑布流效果。

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