问题描述:

I have 9-element list in 3 columns -webkit-column-count: 3. I need to make the first column of four elements, second column of 2 elements and third column of 3 elements. Only CSS

网友答案:

Using only CSS you'll struggle to achieve this unless you have fixed height elements, for example:

.small, .medium, .large {
   margin-bottom: 20px;
}
.small {
   height: 130px;
}
.medium {
   height: 180px;
}
.large {
   height: 280px;
}

Where:

  • .small is 4 elements
  • .medium is 3 elements
  • .large is 2 elements

Here is a codepen showing the end result using fixed height.

This works as column-count works by overflowing into each columns, this means it's practically impossible to achieve a true masonry style using CSS as the elements flow differently.

If you need dynamic height elements then you'll probably need to look at some JavaScript solution.

相关阅读:
Top