如何创建网格/平铺视图？

129

例如，我有一些.article类，并且我想将该类作为网格视图进行查看。所以我采用了这种风格：

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

这种样式将使.article看起来平铺/网格化。固定高度可以正常工作。但是，如果我要将高度设置为自动（根据其中的数据自动拉伸），则网格看起来很讨厌。

在此处输入图片说明

我想要这样的视图：

在此处输入图片说明

css  grid  positioning  css-float  tiles 
— Ariona Rian
source

Answers:

78

这种布局称为砌体布局。石工是另一种网格布局，但它将填充由元素高度不同引起的空白。

jQuery Masonry是创建砌体布局的jQuery插件之一。

或者，您可以使用CSS3 column。但是目前基于jQuery的插件是最佳选择，因为CSS3列存在兼容性问题。

— 书柜
source
3
在这里添加了CSS3方式！
— behradkhodayar，2017年
27

您可以使用flexbox。

  1. 将元素放置在多行列flex容器中

    #flex-container {
  display: flex;
  flex-flow: column wrap;
}

  2. 重新排列元素，以使DOM顺序在水平方向而不是垂直方向受到尊重。例如，如果要3列，

    #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

  3. 在每列的第一项之前强制分行符：

    #flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}

    可悲的是，并非所有浏览器都支持flexbox中的换行符。不过，它可以在Firefox上运行。

显示代码段

— i
source
哇，这是个老问题了。使用flexbox模拟砖石布局并不是最佳选择。您的代码段无效：D，我想您错过了这里的要点。解决此问题的另一种方法是使用CSS3列。但是，感谢您的回答
— Ariona Rian
1
@ArionaRian在Firefox上尝试该代码段，其他浏览器尚不支持强制换行。是的，CSS列也可以工作，但是与flexbox不同，flexbox似乎更适合文本而不是布局。
— Oriol
是的，这就是问题:)，这就是为什么直到现在，我们仍然坚持使用砌体/同位素插件来进行这种设计。
— Ariona Rian
只需显示：flex; flex-wrap：包装; （仅此而已）在容器上，并且在Chrome，Firefox，Safari，Win11和Win7上的IE11上完美运行。小心最小高度，但（见caniuse.com/#search=flex-wrap）
— LBJ
@LBJ但是，然后元素按行排列。这不是您想要的行为
— Oriol
11

既然CSS3可以通过主要的浏览器广泛使用并兼容，那么现在是使用SO的摘录工具的纯解决方案的时候了：

对于使用CSS3 创建砌体布局，只需column-count配合使用即可column-gap。但是我也习惯media-queries使它响应。

在深入研究实现之前，请考虑添加jQuery Masonry库后备版本以使您的代码与旧版浏览器（尤其是IE8-）兼容会更加安全。

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

开始了：

.masonry-brick {
    color: #FFF;
    background-color: #FF00D8;
    display: inline-block;
    padding: 5px;
    width: 100%;
    margin: 1em 0; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
    .masonry-container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 768px) {
    .masonry-container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 960px) {
    .masonry-container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}
<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>
展开摘要

— 别拉德霍达亚
source
您知道砌体中的物品与容器之间如何具有相等的空间吗？
— intcreator's
5
很好，但是对于很多人来说，有必要对masonry bricks。该列按从上到下的顺序排序，问题是要求顺序在水平方向保持不变，而不是在垂直方向切换。例如，在上面找到的最短的块应该在第三列中但在第一行中。
— jscul
3

您可以使用display：grid

例如：

这是一个具有7列的网格，并且您的行具有自动大小。

.myGrid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: auto;
      grid-gap: 10px;
      justify-items: center;
}

有关更多详细信息，请访问以下链接：https ://css-tricks.com/snippets/css/complete-guide-grid/

— vrbsm
source
2

使用CSS网格模块，您可以创建非常相似的布局。

CodePen演示

1）设置三个固定宽度的网格列

ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  ...
}

2）确保高度较大的项目跨越2行

li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

显示代码段

Codepen示范

问题：

  • 项目之间的差距不会统一
  • 您必须手动将大/高项目设置为跨越2行或更多行
  • 有限的浏览器支持：）
— 丹尼尔
source
1

有一个基于网格的示例。

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-layout .item {
  padding: 15px;
  color: #fff;
  background-color: #444;
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 4;
}
<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>
展开摘要

基于 Rachel Andrew FTW的密码笔

— 弗拉基米尔·伊申科（Vladimir Ishenko）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.