CSS3 Columns - List Horizontal Order Instead of Vertical?

HTML & CSS
1 
#columns {
    -moz-column-width: 260px;
    -webkit-column-width: 260px;
     column-width: 260px;
    -moz-column-gap: 15px;
    -webkit-column-gap: 15px;
  width: 90%;
    max-width: 1240px;
    margin: 50px auto;
}

div#columns figure {
    background: #fefefe;
    border: 0px solid #fcfcfc;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 14px;
    padding: 0px 0px 13px 0px;
    transition: opacity .4s ease-in-out;
  display: inline-block;
  column-break-inside: avoid;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

Give you an idea of the CSS. When I add the code:

<div id="columns">
  <figure>
  <div class="squareit">
  <img src="">
</div>
    <figcaption>1</figcaption>
    </figure>
<figure>
  <div class="squareit">
  <img src="">
</div>
    <figcaption>2</figcaption>
    </figure>
<figure>
  <div class="squareit">
  <img src="">
</div>
    <figcaption>3</figcaption>
    </figure>
<figure>
  <div class="squareit">
  <img src="">
</div>
    <figcaption>4</figcaption>
    </figure>
<figure>
  <div class="squareit">
  <img src="">
</div>
    <figcaption>5</figcaption>
    </figure>
<figure>
  <div class="squareit">
  <img src="">
</div>
    <figcaption>6</figcaption>
    </figure>
</div>

That lists down in a column in number order before hitting a height and coming back up. Possible to have it list horizontially across the page instead of down it? Or is there some other coding trick to it?

Cheers
Ryan

1 Like
2

So…you want to make the display:inline-block and not mess with css3 columns? Unless I’m going crazy?

3

Pretty much. Was seeing if easy way to keep the masonry effect with similar code, but have the the first 4 figures be listed horizontally, then the next four figures the next level down. Here is the masonry look I have, but it should be Kelly Brooks the Jordan Sparks to her right, instead of under her. Gives a better sense of content recently added.

1509×963 305 KB

1452×963 358 KB

Cheers
Ryan

4

In short, new image content should be added left to right. Not down and then right.

5

Ah ok. No you wouldn’t be able to have a CSS automated horizontal masonry go on. Unless you switched up your source order. So le’s say you have 4x4 (4 wide 4 down) you could make your 2nd column 1st row be #5 in your source markup. So you’d be sorta cheating that way but it’d work I guess and you’d get to keep your current CSS.

I might try and figure out a way to do this tomorrow since I have nothing else to do but watch Netflix. Doubt I’ll get it but if I do I’ll be sure to respond and let you know.

Edit - in case I was unclear, I do understand you about wanting it horizontal instead of vertical.

7

Exactly. I like everything about it, save for the fact of how it orders the content coming in from the database. Users expect the recently added to run the top then go down a row, not go down in columns, causing a post that is older to be on top in column 3 while a new post is on bottom in column 1.

Cheers
Ryan

8

I’m attempting to do it now but I honestly wouldn’t hold my breath.

9

lol. Thanks for the effort. I’ve been fiddling as well but can’t think of a resolve without jquery stepping in.

10

Yeah the problem is that you can’t really know what margin needs to be applied.

Apart from manual margins being set, you need JS for this.

I almost have it done except for fixing out the source order of it. That codepen in the last post includes the masonry.js and then a small JS snippet.

Sorry.

11

Per @Paul_Wilkins , he suggested this which seems to be a very suitable replacement for masonry.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.