1

Question:

Is there any way to make layout like left to right masonry without JS?

! Please note I do not need exactly masonry, it works a bit different way !

Required:

  1. Left to right order;
  2. Each item goes to next column (items in masonry can pick columns out of order if available space on higher position);
  3. Height is not fixed;
  4. I can't change original order (1,2,3... but not 1,4,7...).

Example:

This one solution is almost what I looking for, but order is broken - example

HTML:

<div class="masonry">
   <div class="item">1. (should be #1) ...</div>
   <div class="item">2. (should be #4) ...</div>
   <div class="item">3. (should be #7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
   <div class="item">4. (should be #2) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
   <div class="item">5. (should be #5) Lorem ipsum dolor sit asonsfd foindfosindf met, consectetur adipisicing elit.</div>
   <div class="item">6. (should be #8) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
   <div class="item">7. (should be #3) Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">8. (should be #6) Lorem ipsum adipisicing elit. Lorem ipsum dolor sit elit</div>
   <div class="item">9. (should be #9) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
</div>

CSS:

body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    text-align:left;
    font-size: .85em;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
Denis Shvets
  • 11
  • 3
  • Closed with a couple of dupe links, though to create a proper, dynamic Masonry layout, you most likely will need to use script. – Asons Oct 11 '18 at 16:08
  • This linked answers do not have required params. I do not need scripts, I do not need exactly masonry layout. – Denis Shvets Oct 12 '18 at 09:08
  • You code sample, which use CSS Columns, can't go "left-to-right" w/o reorder the items, and as you ask for is a _masonry_ like layout, and the linked answers describe that well, hence being a duplicate. Note, you can't combine Flexbox and CSS Columns to get both reorder options and column flow. – Asons Oct 12 '18 at 10:15
  • I know this example can't go left to right and I do not need a column flow. There is my comment: "This one solution is almost what I looking for, but order is broken - example". I'm looking for a solution to get described result. Masonry and Column layout is not expected result. Both have not expected behavior. Column have wrong order, Masonry have wrong column positioning. There is only 2 possible answers: 1. This is not possible with such requirements, 2. Some smart correct solution. – Denis Shvets Oct 12 '18 at 12:59

1 Answers1

0

When ordering your html divs, you have to think differently. If you draw your grid on a piece of paper, you can then draw rings around the columns and you get:

You want this:

1, 2, 3

4, 5, 6

7, 8, 9

You have to order like this:

1, 4, 7

2, 5, 8

3, 6, 9

Just re-order your html lines from columns to rows, like so:

<div class="masonry">
    <div class="item">1. (should be #1) ...</div>

    <div class="item">4. (should be #2) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>

    <div class="item">7. (should be #3) Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

    <div class="item">2. (should be #4) ...</div>

    <div class="item">5. (should be #5) Lorem ipsum dolor sit asonsfd foindfosindf met, consectetur adipisicing elit.</div>

    <div class="item">8. (should be #6) Lorem ipsum adipisicing elit. Lorem ipsum dolor sit elit</div>

    <div class="item">3. (should be #7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

    <div class="item">6. (should be #8) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>

    <div class="item">9. (should be #9) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>

</div>
D S Bailey Freelancer
  • 9
  • 4