在多列网格中,如何限制每列中的项目数

在多列网格中,如何限制每列中的项目数

问题描述:

I am working on a seamless responsive grid using the css property column-count and I want to display 5 columns with a limit for each column to have equal number of items (for example limit to 4 items per column), but cannot find such property in css.

enter image description here

我正在使用css属性column-count处理无缝响应网格,我希望显示5列 每列的限制具有相同数量的项目(例如,每列限制为4个项目),但在css中找不到这样的属性。 p>

p> div>

This can be achieved by using Jquery Masonry

What is Masonry?

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

How to use:

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});