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

For example, I have some class .article, and I want to view this class as grid view. So I applied this style:

例如，我有一些class .article，我想把这个类看作grid view。所以我采用了这种风格:

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

That style will make the .article look tiled/grid. It's work fine with fixed height. But if I want to set the height to auto (automatically stretch according to the data within it), the grid look nasty.

这种样式将使.article看起来像瓷砖/网格。它在固定高度下工作得很好。但如果我想将高度设置为自动(根据其中的数据自动拉伸)，网格看起来很糟糕。

And I want to make the view like this:

我想把这个观点画成这样:

8 个解决方案

#1

This type of layout is called Masonry layout. Masonry is another grid layout but it will fill out the whitespace caused by the difference height of elements.

这种布局称为砌体布局。砌体是另一种网格布局，但它会填补由于元素高度的不同而造成的空白。

jQuery Masonry is one of jQuery plugin to create masonry layout.

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

Alternatively, you can use CSS3 columns. But for now jQuery based plugin is the best choice since there is compatibility issue with CSS3 column.

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

#2

You can use flexbox.

您可以使用flexbox。

1. Place your elements in a multiline column flex container

   将元素放在多行列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,

   重新排列元素，以便水平而不是垂直地尊重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. 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 */
   }
   

   Sadly, not all browsers support line breaks in flexbox yet. It works on Firefox, though.

   遗憾的是，并不是所有的浏览器都支持在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>

#3

Now that CSS3 is widely available & compatible through major browsers, Its time for a pure solution equipped with SO's snippet tool:

既然CSS3可以通过主要浏览器广泛使用和兼容，那么现在就可以使用SO的snippet工具创建一个纯解决方案了:

---

For creating masonry layout using CSS3 the column-count along with column-gap would suffice. But I've also used media-queries to make it responsive.

对于使用CSS3创建砌体布局，列数和列间距就足够了。但我也使用了媒体查询来使它响应。

Before diving into the implementation, please consider that it'd be much safer to add a jQuery Masonry library fallback to make your code compatible for legacy browser, specially IE8- :

在深入到实现之前，请考虑添加jQuery Masonry库以使您的代码与遗留浏览器兼容，特别是IE8-:

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

Here we go:

我们开始吧:

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

#4

The best option to solve that with only css is using css column-count property.

只有css才能解决这个问题的最佳选择是使用css列数属性。

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

Check this for more info: https://developer.mozilla.org/en/docs/Web/CSS/column-count

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

#5

and if you want to go even further than masonry, use isotope http://isotope.metafizzy.co/ it is the advanced version of masonry (developed by the same author) it isn't pure CSS, it uses the help of Javascript but it is very popular, so you will find plenty of docs

如果你想走得比砖石结构更远，可以使用同位素http://同位素同位素同位素。co/它是masonry(由同一作者开发的)的高级版本，它不是纯CSS，它使用了Javascript的帮助，但是它非常流行，所以您会发现大量的文档

if you find it very complicated then there are many premium plugins that based their development on isotope already, for example the Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

如果您发现它非常复杂，那么有许多高级插件已经基于同位素开发，例如媒体框http://codecanyon.net/item/media-boxes-responsive- jquer-grid/5683020

#6

With the CSS Grid Module you can create a pretty similar layout.

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

Codepen demo

1) Set three fixed-width grid columns

1)设置三个固定宽度的栅格列

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

2) Make sure the items with large height span 2 rows

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

The problems:

• The gaps between the items won't be uniform
• 这些项目之间的差距不会是一致的
• You have to manually set the large/high items to span 2 or more rows
• 您必须手动设置大/高项以跨2行或更多行
• Limited browser support :)
• 有限的浏览器支持:)

#7

You can use display: grid

你可以使用display: grid。

for example:

例如:

This is a grid with 7 columns and your rows has auto size.

这是一个有7列的网格，你的行有自动大小。

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

For more details acccess the follow link: https://css-tricks.com/snippets/css/complete-guide-grid/

要了解更多细节，请访问下面的链接:https://css-trick . /snippets/css/complete-guide-grid/

#8

There is one grid-based example.

有一个基于网格的例子。

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

基于Rachel Andrew F.T.W的这支笔