Pinterest Style Layout with CSS, but stacked horiz

问题:

This question already has an answer here:

• CSS-only masonry layout 1 answer

I'm trying to create a pinterest style layout without using Packery or any JS. I've tried using CSS3 columns, but they stack vertically.

See the fiddle here , https://jsfiddle.net/2otpzbgt/1/

column-count: 3;

is what I've used and the cards are appearing as 1, 6, 11 and so on. Is it possible to display as 1, 2, 3??

The purpose I'm trying to solve is a grid layout with dynamic content where images sizes (height) will vary (similar to pinterest), but packery can arrange only if height of the image is known before hand. I'm lazy loading images and fetching cards as you scroll.

Thanks!

回答1:

delete the column-fill: auto; and your problem is solved

回答2:

If you use columns, that's how the content will be stacked - in columns, i.e. vertically.

If you want to stack the content horizontally, you need to set the width of the container to auto, the height to a set pixel amount (e.g. 600px), and make sure that the overflow is shown. Then, you can add your grid items into the div (make sure that they are floated left), and they'll start stacking up horizontally.

This way it unfortunately presents some gaps in the grid because of the different heights, but if you have a grid like this: Grid and want to horizontally number these, it's not that easy. I guess this is why it's not that simple to create a dynamic grid sorted horizontally.

回答3:

I ended up removing all the columns. I know it's radical, but can you work with something like this? It's more or less how I code my site. It helps make it responsive by just changing the width in .pin: https://jsfiddle.net/costumingdiary/p0czqdz0/

#columns {
margin:.5%;
}

.pin {
width:20%;
vertical-align:top;
display:inline-block;
background-color:#fff;
padding:1%;
margin:1%;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}

.pin p {
font: 12px/18px Arial, sans-serif;
color: #333;
margin: 0;
min-height:100px;
}