CSS grid-template-rows: masonry 瀑布流

🌠 CSS 新属性 grid-template-rows: masonry 轻松实现瀑布流布局,CSS 越来越强大了!(目前在 FirefoxNightly 可用)

💡 小技巧:你可以用 @supports 来写面向未来的 CSS,当支持时以使用新特性实现更好的显示,不支持时也可以优雅降级。

实际效果,当不支持时,使用等高来进行图片显示。

grid-template-rows: masonry

图片的完整示例代码:

.unsplash-image-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  .unsplash-image {
    height: 100px;
    padding: 4px;
    cursor: pointer;
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      transition: transform 0.3s ease-in-out;
    }

    &:hover {
      img {
        transform: scale(1.03);
      }
    }
  }

  @supports (grid-template-rows: masonry) {
    grid-template-rows: masonry;
    .unsplash-image {
      height: auto;
    }
  }
}

延伸阅读

最后更新于:
2020-12-03