Masonry layout for Indexes

_layouts/index.liquid

@@ -1,6 +1,7 @@
 {% include page_start.liquid %}
 {% include page_content.liquid %}
 {% include breadcrumbs.liquid title=page.title permalink=page.url %}
+<div id="index">
 {% for data in paginator.posts %}
 	{% if site.xaymar.index.excerpt.enabled %}
 		{% assign content=data.excerpt | strip_html | normalize_whitespace | truncatewords: site.xaymar.index.excerpt.length %}
@@ -9,16 +10,17 @@
 	{% endif %}
 	{% include article.liquid type=post index=true title=data.title content=content permalink=data.url categories=data.categories tags=data.tags %}
 {% endfor %}
+</div>
 {% if paginator.total_pages > 1 %}
 	<ul class="pager">
 		{% if paginator.previous_page %}
 		<li class="previous">
-			<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&larr; Newer Posts</a>
+			<a href="{{ paginator.previous_page_path | absolute_url }}">&larr; Newer Posts</a>
 		</li>
 		{% endif %}
 		{% if paginator.next_page %}
 		<li class="next">
-			<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Older Posts &rarr;</a>
+			<a href="{{ paginator.next_page_path | absolute_url }}">Older Posts &rarr;</a>
 		</li>
 		{% endif %}
 	</ul>

_sass/_base.scss

@@ -1,4 +1,4 @@
-$theme-width: 1000px;
+$theme-width: 1280px;
 $theme-width-sidebar: 250px;
 $theme-hue: 215;
 $theme-content-background: hsl($theme-hue, 33%, 20%);
@@ -31,6 +31,7 @@ $theme-breadcrumbs-link-color: hsl($theme-hue, 100%, 75%);
 $theme-breadcrumbs-link-color-active: hsl($theme-hue, 100%, 85%);
 $theme-footer-background: hsl($theme-hue, 33%, 10.0%);
 $theme-footer-color: hsl($theme-hue, 0%, 80%);
+$theme-index-column-width: 384px;
 
 * {
 	box-sizing: border-box;

_sass/_content.scss

@@ -9,3 +9,4 @@ body > .content {
 @import "_article.scss";
 @import "_blocks.scss";
 @import "_comments.scss";
+@import "_index.scss";

_sass/_index.scss

@@ -0,0 +1,16 @@
+// --------------------------------------------------------------------------------
+// Responsive Masonry
+// --------------------------------------------------------------------------------
+#index {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax($theme-index-column-width, 1fr));
+	grid-template-rows: masonry;
+	grid-column-gap: 1.5rem;
+	grid-row-gap: 1.5rem;
+	justify-items: stretch;
+	align-items: start;
+}
+
+#index > article {
+	margin-top: 0;
+}