0

I'm trying to create 2 column masonry layout using css grid layout. All items in grid have variable heights and it could have any n number of items. So I can't define grid-row for each item. Is it possible to start each new item right after end of previous?

Also, I am not looking for solution using column-count as I would like the items to be left and right. Using column-count it will stack the items in columns, instead I want it besides each other and keeping the order/sequence of items as per the HTML markup.

I am able to achieve most of the part, but it swaps the column items for alternate rows.

Is there a way to fix this without giving grid row heights?

If giving grid row heights is the only way, I open to JS/jQuery solution, but I don't have clue what should be the heights for each of the items, the calculation of which I am not sure about.

Below is the snippet:

/*Reset*/
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/*CSS MASONRY*/
.grid-wrapper {
  padding-left: 23px;
  padding-right: 23px;
}

.grid-row {
  display: grid;
  grid-gap: 35px;
  grid-template-columns: repeat(auto-fill, minmax(calc(50% - 18px), 1fr));
}

.grid-row > .grid-col:nth-child(2n+1) {
    width: 100%;
    grid-row: span 2;
}
<div class="blog-wrapper">
    <div class="grid-row">
        <div class="grid-col">
            <div class="grid-img">
                <img src="https://placehold.jp/308x400.png?text=1" width="308" height="400" alt="1" />
            </div>
            
            <div class="grid-detail">
                <h3>Title goes here...</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="grid-col">
            <div class="grid-img">
                <img src="https://placehold.jp/307x252.png?text=2" width="308" height="252" alt="2" />
            </div>
            
            <div class="grid-detail">
                <h3>Some long title goes here...</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="grid-col">
            <div class="grid-img">
                <img src="https://placehold.jp/308x400.png?text=3" width="308" height="400" alt="3" />
            </div>
            
            <div class="grid-detail">
                <h3>Some really really long title goes here</h3>
                <p>Lorem ipsum dolor sit amet, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
        </div>
        <div class="grid-col">
            <div class="grid-img">
                <img src="https://placehold.jp/307x252.png?text=4" width="308" height="252" alt="4" />
            </div>
            
            <div class="grid-detail">
                <h3>Some really really long title goes here, and goes on new line</h3>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
            </div>
        </div>
        <div class="grid-col">
            <div class="grid-img">
                <img src="https://placehold.jp/307x400.png?text=5" width="308" height="400" alt="5" />
            </div>
            
            <div class="grid-detail">
                <h3>Long long long long long title goes here, and goes on new line</h3>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
            </div>
        </div>
    </div>
</div>

Note:

  • In the above snippet you can see the main issue, the items are seen 1, 2, 4, 3, 5 instead it should be 1, 2, 3, 4, 5.
  • In the snippet above there is no fixed amount of content so height of the items will be different for most of the items in grid.
  • I am also open to custom JS/jQuery solution to this.

Appreciate your help in advance!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
divy3993
  • 5,732
  • 2
  • 28
  • 41
  • CSS-Grid is the wrong tool, Flexbox is needed at the moment. CSS-Grid supports masonry layouts only within experimental mode in Firefox. – tacoshy Sep 22 '22 at 06:33
  • @tacoshy, thanks for the comment, but using `flexbox` the container must be set fixed `height` in pixels which is what I am not looking for. As the items in the container will have random heights, as result container of these items will have random height each time. I hope you get it what I mean. – divy3993 Sep 22 '22 at 06:43
  • @tacoshy, The link suggested by you `CSS-only masonry layout` has answer mentioning `A dynamic masonry layout is not possible with flexbox, at least not in a clean and efficient way.` and so I have choosen grid, I am fine with Firefox doesn't support it. – divy3993 Sep 22 '22 at 06:46
  • @tacoshy, The post suggested by you, mentions `CSS Grid with item dimensions undefined` and shares the link of third party library to use, which I am not looking for as my post above mentions. I am fine with small piece of custom JS Code. – divy3993 Sep 22 '22 at 06:48
  • The link gives more than just one answer... The marked answer gives a full detailed report of the issue and solutions with the down and up-sides. – tacoshy Sep 22 '22 at 07:00

0 Answers0