Blog Page not displaying posts evenly in the grid

My blog page is fine, and displays the post in the grid, BUT the grid has uneven sizes for each post.
I would like my posts to be displayed in 3 columns, going down the page. Please help me fix this.

This is the same as my shop page. The second line below has different sizes. I will not be having more than two lines. So if you can please help me fix this, I will be grateful.

Hello there,

Actually it isn’t an issue to resolve as masonry-styled grid layout to maintain the spaces of each items when it has variation height of title, image, and text. In short, it’s imagined to look like this photos grid. Of course this situation doesn’t meet your need, as you only have a few of posts. The solution for this, please do these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

       * Javascript-Equal-Height-Responsive-Rows
      (function($){'use strict';$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css('box-sizing')==='border-box')||($element.css('-moz-box-sizing')==='border-box');if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
      heights.push(elementHeight);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(':visible');$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
      return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(':visible');$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var _this=this;var event_namespace='.grids_'+grids_event_uid;'grids-event-namespace',event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
      $(window).bind('resize'+event_namespace+' load'+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css('height','auto');$(window).unbind('grids-event-namespace'));return this;};})(window.jQuery);

      jQuery(function($) {

        var $postsContainer = $('.posts-layout');

        $(window).load( function() {

          // Destroy masonry grid

          // Run equal height element in row




4 . Update
5 . Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

      content: '';
      display: block;
      clear: both;

    .posts-layout .hentry{
      position: static;
      float: left;

Flush any applied cache in your site, as it usually blocks new code additions to take effect.


This seems like a lot of work as I am not a Developer. Before I do anything, I need to be sure that it will result what I asked for.
I don’t want the blog page to show photos only.
I like My blog page the way it is now, Photos and words.
I will have one or two blogs a month…so I would like all posts to
display down the page in a nice grid …Just like ‘Latest News’ widget…and to keep continuing down the page as I add more posts

it should just have same size of photos to be displayed and same number of words to be displayed.
Waiting for your advice.

Hello there,

It won’t remove any content. It’ll force each post grid to have equal height in row. Let me know if it troubles you.


1 Like

Thank you. I will do it much later after I have put more posts.
Thank you.