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

Question

提问by Ariona Rian

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

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

.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 看起来平铺/网格。它在固定高度下工作正常。但是如果我想将高度设置为自动（根据其中的数据自动拉伸），网格看起来很糟糕。

enter image description here

在此处输入图片说明

And I want to make the view like this:

我想让这个视图是这样的：

enter image description here

在此处输入图片说明

Answer 1

采纳答案by bookcasey

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.

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

jQuery Masonryis 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 column。但是现在基于 jQuery 的插件是最好的选择，因为 CSS3 列存在兼容性问题。

Answer 2

回答by Oriol

You can use flexbox.

您可以使用弹性盒。

Place your elements in a multiline column flex container

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

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

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.

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

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

Answer 3

回答by Behrad Khodayar

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

现在 CSS3 在主流浏览器中广泛可用并兼容，是时候使用配备 SO 的代码片段工具的纯解决方案了：

For creating masonrylayout using CSS3 the column-countalong with column-gapwould suffice. But I've also used media-queriesto make it responsive.

对于使用 CSS3创建砌体布局，column-count连同column-gap就足够了。但我也习惯于media-queries让它具有响应性。

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>

Answer 4

回答by Patricio Gabriel Maseda

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

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

 .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

Answer 5

回答by vrbsm

You can use 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-tricks.com/snippets/css/complete-guide-grid/

Answer 6

回答by Danield

With the CSS Grid Moduleyou can create a pretty similarlayout.

使用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) 确保大高度的项目跨越 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
Limited browser support:)

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

Answer 7

回答by Vladimir Ishenko

There is one grid-basedexample.

有一个基于网格的示例。

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

基于Rachel Andrew FTW 的这个代码笔

Answer 8

回答by user1978456

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

如果你想比砌体更进一步，请使用 isotope http://isotope.metafizzy.co/它是砌体的高级版本（由同一作者开发）它不是纯 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

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

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

提问by Ariona Rian

采纳答案by bookcasey

回答by Oriol

回答by Behrad Khodayar

回答by Patricio Gabriel Maseda

回答by vrbsm

回答by Danield

Codepen demo

代码笔演示

The problems:

问题：

回答by Vladimir Ishenko

回答by user1978456

相关推荐

最近更新

标签

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

提问by Ariona Rian

采纳答案by bookcasey

回答by Oriol

回答by Behrad Khodayar

回答by Patricio Gabriel Maseda

回答by vrbsm

回答by Danield

Codepen demo

代码笔演示

The problems:

问题：

回答by Vladimir Ishenko

回答by user1978456

相关推荐

CSS 在 Bootstrap 3 中为必填字段添加星号

CSS Bootstrap 中的垂直菜单

CSS 使用 CSS3 在屏幕上移动图像

CSS 自动换行：断字在 IE9 上不起作用

相关推荐

最近更新

标签