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

Question

例如,我有一些类.article,我想将此类视为网格视图.所以我应用了这种风格:

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

该样式将使.article看起来平铺/网格.固定高度可以正常工作.但是如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌.

而我想这样的观点:

Answer 1

这种类型的布局称为砌体布局.砌体是另一种网格布局,但它会填充由元素高度差异引起的空白.

jQuery Masonry是用于创建砌体布局的jQuery插件之一.

或者,您可以使用CSS3 column.但是现在基于jQuery的插件是最好的选择,因为CSS3列存在兼容性问题.

Answer 2

您可以使用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.

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

#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 */

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

/* The following is optional */
#flex-container > div {
  background: #666;
  color: #fff;
  margin: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}
#flex-container > :nth-child(1) { height: 100px; }
#flex-container > :nth-child(2) { height: 50px; }
#flex-container > :nth-child(3) { height: 75px; }
#flex-container > :nth-child(4) { height: 50px; }
#flex-container > :nth-child(5) { height: 100px; }
#flex-container > :nth-child(6) { height: 50px; }
#flex-container > :nth-child(7) { height: 100px; }
#flex-container > :nth-child(8) { height: 75px; }
#flex-container > :nth-child(9) { height: 125px; }

<div id="flex-container">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
  <div>7</div><div>8</div><div>9</div>
</div>

Answer 3

现在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>

Answer 4

仅使用 css 解决该问题的最佳选择是使用 css column-count 属性。

 .content-box {
   border: 10px solid #000000;
   column-count: 3;
 }

查看更多信息：https : //developer.mozilla.org/en/docs/Web/CSS/column-count