3

Here is my problem, I have a 3 column design, similar to Pinterest however, I don't like the order in which they are being displayed.

See this demo: My Demo

as you can see articles are displayed like this

1  3  5
2  4  6

I would like them to be displayed like this:

1  2  3
4  5  6

I know I can achieve it by changing markup, but the problem is that all content will be called from database one by one, so article by article and so it need's to be ordered in a same way as it is in markup, just display differently on a page:

HTML

<div class="page-wrap main">

    <div class="grid">

        <article class="box article">
            <header class="clearfix">
                    1
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    2
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    3
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    4
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    5
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    6
            </header>
        </article>

    </div> <!-- END .grid  (Content) -->

</div> <!-- END .page-wrap (Content) -->

CSS

body {
  background-color: #ebebeb;
}

.page-wrap {
  width: 90%;
  max-width: 1280px;
  margin: 0 5%;
}

.grid {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;

  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}

.box {
  display: inline-block;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 1px;
  width: 100%;
}

.article {
  background-color: #ffffff;
  margin-top: 20px;
}
Ilja
  • 44,142
  • 92
  • 275
  • 498
  • I have had this same problem and the general response is that its not very easy.. – Bill Apr 04 '13 at 17:08
  • @BillyMathews But it's possible right? – Ilja Apr 04 '13 at 17:09
  • anything's possible ;P – Bill Apr 04 '13 at 17:10
  • @BillyMathews ;D any chance I can get some sort of reference that could help with this problem? – Ilja Apr 04 '13 at 17:11
  • Sorry it was a while ago, I can't remember any of the answers - I think one was a plugin.. I can tell you, however, that it isn't achievable in CSS alone. Maybe you could come up with some sort of algorithm that rearranges the content server-side (if you know exactly how many posts will be in a column)? – Bill Apr 04 '13 at 17:16
  • This is impossible with CSS alone. Flexbox can get you almost there: http://codepen.io/cimmanon/pen/iHGCd. If you want them neatly fitted together, then you need a JS library called *Masonry*. – cimmanon Apr 04 '13 at 17:26
  • you have two options in my opinion. The first one is that you change from columns to rows, what would be the easier approach. The other solution is a bit more complicated but more elegant. You have so or so somewhere a server-side script running (php, asp, whatever) for the database connection. You could take your array of articles and instead of sending them directly to the page you send the array at first to a sorting algorithm that brings the articles in the order you want it. – Sven Bieder Apr 04 '13 at 17:28
  • I've posted a jsfiddle demo on my answer how to achieve this – Kevin Lynch Apr 04 '13 at 17:52
  • Wouldn't this be easier to do if you just ditched the *column-* properties altogether and made the .box 30% width? – fordareh Apr 04 '13 at 18:03
  • @fordareh I tried that, but couldn't figure out how to do margins, because if you set them all to say (margin-left: 5px) than first column gets that margin as well and it just does't look nice, if you can suggest how to fix that I would really appreciate that. Tried it in fiddle, doesn't look like I want it with different heights (pinterest like) http://jsbin.com/epulex/6/edit – Ilja Apr 04 '13 at 18:07
  • @IlyaKnaup - adding text-align: center to the page wrap and making hte margins percentage based seems to clear most of the inconsistencies out: http://jsbin.com/epulex/7/ ... but you may have a different goal. Essentially, centering it makes the left margin on the first box and the right margin on the right box irrelevent. – fordareh Apr 04 '13 at 18:14
  • @fordareh I appreciate your time, but yea, I was planning to have dynamic heights for each article as you can see here http://jsbin.com/epulex/10/edit it doesn't really work out.. I gues I'll have to take a look at some sort of jQuery sollution – Ilja Apr 04 '13 at 18:21
  • I don't think the Pinterest layout is possible with pure CSS. – Cat Chen Apr 04 '13 at 18:22

1 Answers1

1

You can do it but you will have to add a new class to each article. This will not disrupt the rest of the website as the CSS you need to add you will only call it to the pages you want the new layout to apply to. Heres a demo http://jsfiddle.net/kevinPHPkevin/LZgtA/

<div class="page-wrap main">

<div class="grid">

    <article class="box article one">
        <header class="clearfix">
                1
        </header>
    </article>

    <article class="box article two">
        <header class="clearfix">
                2
        </header>
    </article>

    <article class="box article three">
        <header class="clearfix">
                3
        </header>
    </article>

    <article class="box article four">
        <header class="clearfix">
                4
        </header>
    </article>

    <article class="box article five">
        <header class="clearfix">
                5
        </header>
    </article>

    <article class="box article six">
        <header class="clearfix">
                6
        </header>
    </article>

</div> <!-- END .grid  (Content) -->

Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
  • I'm sorry I don't understand what you mean? What will new class achieve and what css goes with it? – Ilja Apr 04 '13 at 17:43
  • Thank you, but this is not exactly what I'm looking for – Ilja Apr 04 '13 at 18:02
  • 1
    If the heights of the boxes are not the same, this won't work as the Pinterest layout. I just changed the height properties of your code: http://jsfiddle.net/LZgtA/1/ – Cat Chen Apr 04 '13 at 18:20