Skip to content

Instantly share code, notes, and snippets.

@leabs
Created March 5, 2023 12:21
Show Gist options
  • Save leabs/cb86e2c63908473d8e2edc63ef18e141 to your computer and use it in GitHub Desktop.
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 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