Masonary for blog post page

Help
1

{% for post in site.posts %} is driving me mad in trying to create a masonry-based post page - cards don’t move or get nested, depending on the location of the {% for… %} statements. Help is appreciated.

---
layout: default
permalink: /blog/
title: Blog
---

<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

<div class="container">
	<div class="row">
		
		<div class="p-3 border rounded-1 bg-as">
			<h1 class="lh-1">{{ page.title }}</h1>
			
			<p class="mb-0"><a href="/" class="as-menu-link">{{ site.shortname }}</a><i class="fa-regular fa-circle"></i><a href="/blog" class="as-menu-link text-muted">blog</a></p>
			
		</div>
		
		<!--<main class="container">-->
		<div class="p-3 border rounded-1 bg-light mt-2">
			
			<div class="row" data-masonry='{"percentPosition": true }'>
				{% for post in site.posts %} 
				
				<div class="col-sm-6 col-lg-4 mb-4">
					
					<!--{% if post.categories contains 'Blog' %}-->
					
					<div class="card">
						{% if post.thumbnail-image %}
						<span class="thumbnail img-fluid float-start me-2 mt-2 mb-2 rounded-1">
							<a href="{{ post.url }}">
								<img src="{{ post.thumbnail-image }}" width="{{ post.thumbnail-image-width }}" height="{{ post.thumbnail-image-height }}">
							</a>
						</span>
						{% else %}
						
						<span class="thumbnail img-fluid float-start me-2 mt-2 mb-2 rounded-1">
							
							<a href="{{ post.url }}"><img src="https://via.placeholder.com/150?text=&nbsp;" /></a>
						</span>
						{% endif %}
						
						{% if post.draft %}
						<div class="blinkme" style="color: red;"> Draft Post </div>
						{% endif %}
						
						<div class="card-body">
							<h5 class="card-title">{{ post.title }}</h5>
							<h6 class="card-subtitle mb-2 text-muted">{{ post.date }}</h6>
							<p class="card-text">{{ post.content | strip_html | truncatewords: 60 }}
							</p>
						</div>
						
						<!--{% endif %} -->
						
					</div><!-- card -->
					
				</div><!-- 6 4 4 -->
				{% endfor %}
				
			</div><!-- data masonary -->
		</div><!-- rounded box -->
	</div><!-- row -->
</div><!-- container -->
2

Might not be the problem, but the above line seems strange. Why use HTML-comments around Liquid code? I think the Liquid will still execute, always leaving empty HTML comments in the output. If you meant to comment out the Liquid, then one should use {% comment %}...{% endcomment %}.