Automatically collapsing vertical spacing between posts in grid theme

1 Views

I’m trying to make a custom grid-based theme for my wordpress site. One thing I want to do is make it so that the vertical spacing between posts in the same column is automatically collapsed, so that there is no empty space between them even if the posts are different heights.

For example, on this site the grid is collapsing how I want it to. However, on this site, the posts are arranged in horiztonally aligned rows and there are spaces between each row.

Read More

Is there a name for the technique that is used to make posts arrange themselves as in the first example site? I’m at least looking for a term that I could Google for to learn how to do it … but even better would be a code sample that would show how to make a grid that auto-arranges in this manner.

Thanks!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. This is known as a dynamic grid or perhaps Pinterest-like grid. It was popularized by Pinterest.

    Essentially, you cannot do this with CSS and HTML alone. This type of grid needs to be handled with some Javascript or server-side processing. I would suggest going with Javascript and checking out one of the many jQuery plugins which do exactly what you want (note that the first site you linked to uses a plugin for their layout):

    Any of these should do the trick.

    Masonry has you set the container width and spacing between blocks using CSS. You specify the width of columns you want in Javascript. The calculation of the block width and spacing will determine how many columns there are in the container.

    Wookmark and BlocksIt have similar configuration options. They let you specify the container width and then the block width. Between that and the offset (distance between blocks) you could have it arranged such that you end up with 3 columns of the same width.

    Freetile out of the box doesn’t support same-width columns (one of its features), however you would be able to accomplish the same thing with a little CSS and/or modifying the plugin directly.

    The main part here is getting one of these plugins set up and working. Once that is in place, you’d only need to adjust your CSS to your liking. Each of these plugins provide working examples as well as code samples and documentation. A simple implementation of Masonry would look like this:

    HTML:

    <div id="grid-container">
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
</div>

    CSS:

    #grid-container {
    width: 940px; //width of your container
}
.post {
    margin: 10px; //spacing between each block/post
}

    Javascript:

    $('#grid-container').masonry({
    itemSelector: '.post', //selector for each block
    columnWidth: 300       //width of your columns
});

    Each block post will be 300px wide with 10px of margin all around. You’ll end up with 3 columns, each column with 10px of margin between them.

    Each of the plugins listed is licensed in such a way that it’s free for personal/commercial use (see each plugin for their respective licensing), so no worries there.