美文网首页
瀑布流布局Grid

瀑布流布局Grid

作者: 仰望天空的人 | 来源:发表于2018-06-14 18:38 被阅读115次

Grid

Grid将是布局当中的一把利剑,也可以说是神器,特别是今年得到了众多浏览器的支持。记得去年在CSSConf分享后,有同学问我Grid是否能实现瀑布流的布局。说实话,虽然Grid对于布局而言是非常的强大,但要很好的实现瀑布流布局还是非常的蛋疼。@Rachel Andrew在她分享的文章中也特意提到过实现瀑布流的方案。从文章中摘出有关于瀑布流布局的那部分内容。

Grid制作瀑布流,对于结构而言和Multi-columns示例中的一样。只不过在.masonry使用display:grid来进行声明:

.masonry {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(50px, auto);
}

对于.item较为蛋疼,需要分别通过grid-rowgrid-column来指定列表项目所在的区域,比如:

.masonry > div:nth-child(1) {
    grid-row: 1 / 4;
    grid-column: 1;
}

.masonry > div:nth-child(2) {
    grid-row: 1 / 3;
    grid-column: 2;
}
...

将效果Fork过来:

<iframe id="XRJEqO" src="https://codepen.io/airen/embed/XRJEqO?height=400&theme-id=0&slug-hash=XRJEqO&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe>

在Grid中有自动排列的算法的属性:

  • 如果没有明确指定网格项目位置,网格会按自动排列算法,将它最大化利用可用空间
  • 如果在当前行没有可用位置,网格会自动搜索下一行,这样会造成一定的差距,浪费可用空间
  • 可以把grid-auto-flowrow值改变auto,可以切换搜索顺序
  • grid-auto-flow还可以接受另一个关键词。默认情况下,其值是sparse,但我们可以将其显式的设置为dense,让网格项目试图自动填补所有可用的空白空间

言外之意,Grid中自动排列的算法对于实现瀑布流布局有很大的帮助。不过对于堆栈(列表项目)高度不能友好的控制。

总结

这篇文章主要介绍了如何使用纯CSS实现瀑布流的布局。文章简单介绍了三种实现方案:Multi-columns、Flexbox和Grid。从上面的示例或者实现手段而言,较我友好的是Flexbox的方案。当然,随着CSS Grid特性的完善,使用Grid实现瀑布流布局将会变得更为简单和友好。那让我们拭目以待。当然如果你觉得这些方案都不太好,你可以依旧可以考虑JavaScript的解决方案。如果你有更好的解决方案,也希望能在下面的评论中与我们一起分享。

以上摘自大漠

相关文章

  • grid 布局实现瀑布流

    1. Grid布局是最强大的 CSS 布局方案。 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的...

  • 瀑布流布局 的学习

    1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...

  • 瀑布流、木桶布局

    瀑布流 瀑布流效果代码 木桶布局 木桶布局效果(加载有点慢)代码

  • 瀑布流布局Grid

    Grid Grid将是布局当中的一把利剑,也可以说是神器,特别是今年得到了众多浏览器的支持。记得去年在CSSCon...

  • 瀑布流照片墙布局

    title: 瀑布流照片墙布局 瀑布流概念 瀑布流布局是错落式的布局方式。它有一个特点,整个布局以列为单位,下一个...

  • CSS经典布局

    圣杯布局 瀑布流

  • 瀑布流

    瀑布流布局瀑布流jsonp新闻页

  • 瀑布流布局_木桶布局

    题目1: 实现一个瀑布流布局效果 瀑布流 题目2:实现木桶布局效果 木桶布局 题目3:**实现一个新闻瀑布流新闻网...

  • 瀑布流和懒加载结合

    实现一个瀑布流布局效果 瀑布流

  • 瀑布流

    什么是瀑布流: 欣赏 pinterest 样式分析 瀑布流,又被称作为瀑布流式布局,是一种比较流行的网站页面布局方...

网友评论

      本文标题:瀑布流布局Grid

      本文链接:https://www.haomeiwen.com/subject/vpxueftx.html