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

例如，我有一些类。文章中，我希望将这个类视为网格视图。所以我采用了这种风格:

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

这种风格将使。文章看起来是平铺的/网格的。在固定高度下工作良好。但是如果我想设置高度为自动(根据其中的数据自动拉伸) ，网格看起来很糟糕。

enter image description here

我想把景色设计成这样:

enter image description here

89257 次浏览
小开
最佳答案

这种布局类型称为 砌体布局。砌体是另一种网格布局，但它将填补空白所造成的不同高度的元素。

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

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

小开

如果你想比砌体更进一步，使用同位素 http://isotope.metafizzy.co/它是砌体的高级版本(由同一作者开发)它不是纯 CSS，它使用了 Javascript 的帮助，但它非常流行，所以你会发现大量的文档

如果你觉得它非常复杂，那么有许多优质的插件，基于他们的发展同位素已经，例如媒体盒 http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

小开

你可以用弹簧盒。

  1. 将元素放在一个多行列 Flex 容器中

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

  2. Reorder the elements, so that the DOM order is respected horizontally instead of vertically. For example, if you want 3 columns,

    #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. Force a column break before the first item of each column:

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

    遗憾的是，并不是所有的浏览器都支持在 Flexbox 中断行。

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

小开

只使用 css 解决这个问题的最佳选择是使用 css column-count 属性。

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

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

小开

现在 CSS3已经通过主流浏览器得到了广泛的应用和兼容，是时候使用带有 SO 代码片段工具的纯解决方案了:

对于使用 CSS3创建 砖石工程布局，使用 column-count和 column-gap就足够了。但我也使用了 media-queries让它有反应。

在深入研究实现之前，请考虑添加一个 jQuery 砌体库备份，使您的代码与旧版浏览器兼容，特别是 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>

小开

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


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>

代码演示

问题是:

  • 物品之间的间隙不会是均匀的
  • 您必须手动将大/高项设置为跨越2行或更多行
  • 有限的浏览器支持 :)
小开

可以使用 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;
}

想了解更多细节，可以访问以下链接: < a href = “ https://css-trick s.com/nipppet/css/complete-guide-grid/”rel = “ nofollow norefrer”> https://css-tricks.com/snippets/css/complete-guide-grid/

小开

有一个 基于网格的的例子。

.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 F.T.W


提交答案