Masonary for blog post page

{% 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="" 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>
		<!--<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 }}">
						{% else %}
						<span class="thumbnail img-fluid float-start me-2 mt-2 mb-2 rounded-1">
							<a href="{{ post.url }}"><img src=";" /></a>
						{% 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">{{ }}</h6>
							<p class="card-text">{{ post.content | strip_html | truncatewords: 60 }}
						<!--{% endif %} -->
					</div><!-- card -->
				</div><!-- 6 4 4 -->
				{% endfor %}
			</div><!-- data masonary -->
		</div><!-- rounded box -->
	</div><!-- row -->
</div><!-- container -->

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 %}.