css 网格布局 - 如何创建网格/瓷砖视图?




4 Answers

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

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

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

grid布局阮一峰 grid阮一峰

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

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

该风格将使.article看起来平铺/网格。 它工作正常,高度固定。 但是,如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌。

我想让这样的观点:




现在CSS3可以通过主流浏览器获得广泛的兼容性,并且可以兼容SO的代码片段工具:

为了使用CSS3创建砌体布局, column-countcolumn-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>







您可以使用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/ ://css-tricks.com/snippets/css/complete-guide-grid/




Related