Created
March 5, 2023 12:21
-
-
Save leabs/cb86e2c63908473d8e2edc63ef18e141 to your computer and use it in GitHub Desktop.
This adds a parent wrapper div every 3 children using Liquid's modulo filter. This uses bulma CSS classes, but applies to any CSS framework
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- This loops through the paginated posts in Jekyll --> | |
{% for post in paginator.posts %} | |
<!-- Modulo counter in liquid, will enclose div.columns every 3 posts starting at 0 --> | |
{% assign mod = forloop.index0 | modulo:3 %} | |
<!-- If the modulo counter is 0, then open a div with class columns --> | |
{% if mod == 0 %} | |
<div class="columns"> | |
{% endif %} | |
<!-- This is the post div, it will be repeated 3 times --> | |
<div class="column"> | |
<h1> | |
<a href="{{ post.url }}">{{ post.title }}</a> | |
</h1> | |
<div> | |
<span>Day {{ post.date | date: "%j" }}</span> | |
</div> | |
<div class="content"> | |
{{ post.content | strip_html }} | |
</div> | |
</div> | |
<!-- Closes the columns parent, skips the first 2 post divs, and adds to every 3rd post afterward--> | |
{% if mod == 2 %} | |
</div> | |
{% endif %} | |
{% endfor %} | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment