Create a dynamic list of categories display like a masonry loop

Nevermind, I solved the problem using some code found elsewhere. For anyone’s reference, here’s what I used so that each category was wrapped in my pre-styled <div>s to allow them to be easily positioned/styled.

`<?php $categories= get_categories();
foreach ($categories as $cat) {
echo ‘<div class=”post-container”><div class=”post”><div class=”post-inner”>’.
‘<div class=”post-header” style=”text-align:center”>’.
‘<h3 class=”page-title” style=”margin-bottom:5px”><a href=”‘.get_category_link($cat->cat_ID).'”>’.$cat->cat_name.'</a></h3>’.
‘<div class=”home-postcount”>’.'(‘.$cat->category_count.’ projects)’.'</div>’.
‘</div>’.
$cat->description.
‘</div></div></div>’;
}
?>`

Cheers for this, very helpful!
I have this css below added to style.css and my category page lays out different when used so is working to a degree.. Im using onetone theme, which is responsive however mine arnt showing 3 columns across like yours, .. is there any more I should add to the following… Cheers

.post-container {
	width: calc( ( 100% - 40px ) / 3 );
	margin-bottom: 20px;

    }

@media (max-width: 800px) {
	.post-inner {
		padding: 7%;
	}
	.post-container {
		width: calc( ( 100% - 40px ) / 2 );
	}
	.masonry-loop.js-masonry {
		padding: 0 10px 0 10px;
	}
}

@media (max-width: 600px) {
	.post-inner {
		padding: 5%;
	}
	.post-container {
		width: calc( 100% - 20px );
	}
}

<disclaimer> I am no expert in this </disclaimer> but here’s more on what I did:

The PHP code snippet I gave in above is within a <div> like this:
<div id="categories-and-tags" class="masonry-loop js-masonry">

To make the categories display like masonry blocks, and to tell the site which elements to display like blocks, they have to have a parent div with the class masonry-loop. To activate the loop, the following code is in my header.php:

<script type="text/javascript">
			jQuery(window).load(function() {
			// MASSONRY Without jquery
			var container = document.querySelector('.masonry-loop');
			var msnry = new Masonry( container, {
				gutter:		20,
				itemSelector: '.post-container',
				columnWidth: '.post-container',
				percentPosition: true,
			});
        	});
	</script>

Your CSS is identical to mine, and I don’t know what your site looks like, but if your’s displays differently than mine I think it might be the necessary header script and using the right parent element.

As a bonus here’s the code I used to display the tags underneath. It appears directly under the categories code within the masonry-loop div. (The .home-special tag uses some simple CSS to change the font/background-color)

<div class="home-special post-container hometag"><div class="post"><div class="post-inner">Browse Most Used Tags  →</div></div></div>
					<?php $tags = get_tags(array('orderby' => 'count','number' => '5','order' => 'DESC'));
						foreach ( $tags as $tag ) {
							echo '<div class="post-container"><div class="post"><div class="post-inner hometag">'.
							'<a href="'.get_tag_link($tag->term_id).'">'.$tag->name.'</a>'.
							'</div></div></div>';
						}
					?>

<disclaimer> I am no expert in this </disclaimer> but here’s more on what I did:

The PHP code snippet I gave in above is within a <div> like this:
<div id="categories-and-tags" class="masonry-loop js-masonry">

To make the categories display like masonry blocks, and to tell the site which elements to display like blocks, they have to have a parent div with the class masonry-loop. To activate the loop, the following code is in my header.php:

<script type="text/javascript">
			jQuery(window).load(function() {
			// MASSONRY Without jquery
			var container = document.querySelector('.masonry-loop');
			var msnry = new Masonry( container, {
				gutter:		20,
				itemSelector: '.post-container',
				columnWidth: '.post-container',
				percentPosition: true,
			});
        	});
	</script>

Your CSS is identical to mine, and I don’t know what your site looks like, but if your’s displays differently than mine I think it might be the necessary header script and using the right parent element.

As a bonus here’s the code I used to display the tags underneath. It appears directly under the categories code within the masonry-loop div. (The .home-special tag uses some simple CSS to change the font/background-color)

<div class="home-special post-container hometag"><div class="post"><div class="post-inner">Browse Most Used Tags  →</div></div></div>
					<?php $tags = get_tags(array('orderby' => 'count','number' => '5','order' => 'DESC'));
						foreach ( $tags as $tag ) {
							echo '<div class="post-container"><div class="post"><div class="post-inner hometag">'.
							'<a href="'.get_tag_link($tag->term_id).'">'.$tag->name.'</a>'.
							'</div></div></div>';
						}
					?>

Hey thanks for quick response & fully understand your not an expert however appreciate this. Will give this a trial, thanks.