joomla Category Blog View - Different height on articles

1
votes

We are using Joomla 3.3 and have the front page sat up as an Category Blog View. Like this: https://docs.joomla.org/images/a/ad/Table-blog-layout.jpg

We have articles that have different height and we want it to look like this: https://docs.joomla.org/images/5/57/Standard-joomla-blog-layout.jpg

(The sorting is not important for us, but hat we don't have any space between the articles)

How can we make this? Settings? Plugin?

We are using protostar template.

1
cssjoomla

1 Answers

1
votes

Try looking at this link: http://w3bits.com/css-masonry/

It should help you do what you want.

Adding info:

If your HTML looks like this:

<div class="masonry">
   <div class="item">Lorem ipsum</div>
   <div class="item">Neque, vitae</div>
   <div class="item">Incidunt sit unde</div>
   <div class="item">Lorem ipsum dolor</div>
   <div class="item">Lorem temporibus!</div>
   <div class="item">Ab, adipisci</div>
</div>

Then the CSS should look like this:

.masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item {
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

So, the .item should be each of the articles and the .masonry should be the wrapper around all of the articles.