如何创建网格/平铺视图？ [复制]答案

【问题标题】：How to Create Grid/Tile View? [duplicate]如何创建网格/平铺视图？ [复制]
【发布时间】：2012-01-18 04:42:45
【问题描述】：

例如，我有一些类 .article，我想将这个类视为网格视图。所以我应用了这种风格：

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

该样式将使 .article 看起来像平铺/网格。它在固定高度下工作正常。但是如果我想将高度设置为自动（根据其中的数据自动拉伸），网格看起来很讨厌。

我想让视图像这样：

【问题讨论】：

标签： css grid positioning css-float tiles

【解决方案1】：

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

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

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

【讨论】：

添加了 CSS3 方式 here 留下来！

【解决方案2】：

你可以使用弹性盒子。

将您的元素放置在多行列弹性容器中

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

对元素重新排序，以使 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 */

在每列的第一项之前强制换行：
```
#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>

【讨论】：

哇，这是一个老问题。而使用 flexbox 来模拟砌体布局并不是最好的选择。顺便说一句，您的 sn-p 不起作用：D，我认为您错过了这里的重点。解决此问题的另一种解决方法是使用 CSS3 列。但是，谢谢你的回答
@ArionaRian 在 Firefox 上试试 sn-p，其他浏览器还不支持强制换行。是的，CSS 列也可以工作，但与 flexbox 不同的是，flexbox 似乎更适合文本而不是布局。
是的，这就是问题所在:)，这就是为什么直到现在，我们仍然坚持使用砖石/同位素插件来布置这种设计。
只放 display: flex;弹性包装：换行；（仅此而已）在容器上，它在 Win11 和 Win7 上的 Chrome、Firefox、Safari、IE11 中完美运行。不过要小心最小高度（请参阅caniuse.com/#search=flex-wrap）
@LBJ 但是元素是按行排列的。这不是这里想要的行为

【解决方案3】：

既然 CSS3 已在主流浏览器中广泛使用并兼容，那么是时候提供一个配备 SO 的 sn-p 工具的纯解决方案了：

要使用 CSS3 创建 masonry 布局，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>

【讨论】：

你知道如何使砌体和容器中的物品之间的空间相等吗？
这很好，但对于很多人来说，有必要订购masonry bricks。该列从上到下对事物进行排序，问题是要求顺序保持水平不变，而不是切换到垂直。例如，上面找到的最短块应该在第三列但在顶行。

【解决方案4】：

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

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

【讨论】：

工作高度相同的项目。不会像砌体那样工作。

【解决方案5】：

你可以使用 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/

【讨论】：

【解决方案6】：

使用CSS Grid Module，您可以创建一个非常相似的布局。

CodePen demo

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;
}

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 85vh;
  margin: 4vh auto;
  border: 5px solid green;
  padding: 1rem;
  overflow: auto;
  counter-reset: item;
}
li {
  position: relative;
}
li:after {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  padding: 0.3rem;
  background: salmon;
  color: white;
  left:0;
  top:0;
}
img {
  outline: 5px solid salmon;
}
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;
}

<ul>
  <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

Codepen demo

问题：

项目之间的间隙将不均匀
您必须手动将大/高项目设置为跨越 2 行或更多行
Limited browser support :)

【讨论】：

【解决方案7】：

有一个基于网格的示例。

.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>

based on this code-pen 雷切尔·安德鲁·F.T.W

【讨论】：

【解决方案8】：

如果你想比砌体更进一步，使用同位素http://isotope.metafizzy.co/ 这是砌体的高级版本（由同一作者开发）它不是纯 CSS，它使用 Javascript 的帮助，但它非常很受欢迎，所以你会发现很多文档

如果您觉得它非常复杂，那么已经有许多基于同位素开发的高级插件，例如 Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

【讨论】：