Grid for archive-single.html is doing something odd

[lsolesen]

• [ ] This is a question about using the theme.
• [ ] This is a feature request or enhancement.
• [x] I believe this to be a bug with the theme.
  • [ ] I am using the latest version of the theme.
  • [ ] I have updated all gems with bundle update.
  • [ ] I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version:
• Jekyll version:
• GitHub Pages hosted: yes/no
• Operating system:

---

Expected behavior

There should be four columns in the first row, but there is only two. All other rows performs nicely.

This happens both on splash and archive layout.

Steps to reproduce the behavior

It is reproduced in https://github.com/vih/historie/tree/yearbook --> on the page /yearbooks/

[mmistakes]

This isn't a bug per say. Without getting too much into how CSS works (don't have the time :wink:) you need to split up feature rows from grid items.

The grid items are set to float, and clear every 4th item. What's going on in your example above is the 2 feature rows are being counted as grid items, and on the 2nd grid item (technically the 4 item in the grid archive container) it's clearing it. That's why you see two, then the space.

You'll have to restructure the HTML to get around that.

[mmistakes]

Fire up your web browser's development tools and start inspecting the elements. It'll be easier to see what's going on with the clears.

The grid layout was built for a specific use case, it's not battle tested to be used in this way without some work on your part.

[lsolesen]

Doh! Thanks for the clarification. I should have caught this myself.

[jangedoo]

@lsolesen did you manage to figure out the solution? I also have similar problem. It seems that the first "card" gets a class of grid__item:nth-child(4n+3). From the browser inspector, I changed it to .grid__item:nth-child(4n+1) and everything seemed to work but I'm really not sure where and what to change.

[jangedoo]

I just surrounded the for loop in _layouts/home.html with a div and now everything seems to work fine.

<div>
{% for post in paginator.posts %}
  {% include archive-single.html type="grid" %}
{% endfor %}
</div>