5

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!

melvindidit
  • 410
  • 2
  • 5
  • 15

3 Answers3

1

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

YuZA
  • 105
  • 1
  • 2
  • 11
  • 1
    yes, I've tried that, but apparently the default property 'column-fill: balance' only works in firefox – melvindidit May 04 '16 at 06:58
  • according to w3schools you can use -webkit-column-fill: balance; for Chrome, Safari, Opera – YuZA May 04 '16 at 07:03
  • did you try the above solution . its work fine for me – Noni May 04 '16 at 07:04
  • yes, I've tried it, still showing 1, 6, 11 : https://jsfiddle.net/2otpzbgt/2/ – melvindidit May 04 '16 at 07:07
  • @noni but colum-fill supports only in firefox: http://www.w3schools.com/cssref/css3_pr_column-fill.asp – MrNobody007 May 04 '16 at 07:12
  • Originally column-count property useful for text not for arrange. Your code working right. But not good for this . – YuZA May 04 '16 at 07:13
  • Checkout this solution. Maybe helpful http://stackoverflow.com/questions/17323579/column-count-in-horizontal – YuZA May 04 '16 at 07:17
  • Thanks for your time, but still couldn't find a solution. I think thats the CSS limitations – melvindidit May 04 '16 at 07:24
  • @melvindidit very interesting question (y) . and if we float left and give into grid its not align as , it appreciated for effort . and is that realy needs to give number because even pintrest not evene given the number sequence ?? correct me if i am wrong . – Noni May 04 '16 at 07:43
  • @noni : pinterest is floating left its cards. so it'll appear as 1,2,3 etc.., (and are not using columns css3 property, but i think pinterest is rendering the html itself on the server side, so image dimensions are know before hand, height is set accordingly, then packery wont have a problem (which is something im not capable of doing, hence was looking for a workaround and came columns in css3. :) – melvindidit May 04 '16 at 07:56
1

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.

S. Ida
  • 21
  • 7
  • Thanks, but like I mentioned, I'm not at the liberty of setting height, as all the image heights will be random and can't be found beforehand. – melvindidit May 04 '16 at 07:26
  • I meant set the height on the container, not the actual grid items. – S. Ida May 04 '16 at 07:30
  • I edited your jsfiddle: https://jsfiddle.net/2otpzbgt/3/ – S. Ida May 04 '16 at 07:35
  • But now there are gaps?? which i dont want? (tested on chrome) – melvindidit May 04 '16 at 07:39
  • I got that, but I wonder, how would you horizontally number the items in a grid that looks like this one: http://i.stack.imgur.com/5er1Z.png – S. Ida May 04 '16 at 07:53
  • I dont mind any numbering as long as the items are not stacked vertically – melvindidit May 04 '16 at 07:57
  • But if you can't number the items in that grid, how should the html/css know where to put things? And why is the order important if the user can't read the order of the content anyway? – S. Ida May 04 '16 at 08:00
-1

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;
}
costumingdiary
  • 301
  • 1
  • 3
  • 14