如何创build网格/瓷砖视图？
例如，我有一些类.article，我想查看这个类作为网格视图。 所以我应用了这种风格：
.article{ width:100px; height:100px; background:#333; float:left; margin:5px; } 这种风格将使.article看起来平铺/网格。 这是固定的高度工作正常。 但是，如果我想将高度设置为自动（根据其中的数据自动拉伸），网格看起来很讨厌。
我想要这样的看法：
这种布局被称为砌体布局 。 砌体是另一个网格布局，但它会填写由元素的高度不同造成的空白。
jQuery Masonry是jQuery插件之一，用于创build砌体布局。
或者，您可以使用CSS3 column 。 但是现在基于jQuery的插件是最好的select，因为CSS3列存在兼容性问题。
您可以使用flexbox。
-
将您的元素放置在多行列柔性容器中
#flex-container { display: flex; flex-flow: column wrap; } -
对元素进行重新sorting，以便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>
现在，CSS3可以通过主stream浏览器获得广泛的兼容性，而且它的时间只需要一个纯粹的解决scheme，就可以使用SO的代码片段工具：
为了使用CSS3创build砌体布局， 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>
解决这个只有CSS的最佳select是使用CSS列数属性。
.content-box { border: 10px solid #000000; column-count: 3; }
查看更多信息： https ： //developer.mozilla.org/en/docs/Web/CSS/column-count
如果你想要比砌石更进一步，使用同位素http://isotope.metafizzy.co/它是砖石的高级版本（由同一个作者开发）它不是纯粹的CSS，它使用Javascript的帮助但它是非常受欢迎的，所以你会发现大量的文档;
如果你觉得它非常复杂，那么有很多高级插件的基础上，他们已经开发同位素，例如媒体盒http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020
使用CSS网格模块，您可以创build一个非常相似的布局。
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>
那些正在使用引导框架的人，如果他们不想使用其他任何东西，他们可以做下面的事情。
<div class="container"> <div class="row"> <div class="col-md-6"> <!-- Now using divs keep adding data content in specific format, just don't add height explicitly--> <div> </div> </div> <div class="col-md-6"> <!-- Now using divs keep adding data content in specific format, just don't add height explicitly--> <div></div> </div> </div> </div>
