Dear all,
I cannot figure out to get a correct alignment of several grids on a single page. I’m using the minimal-mistakes theme.
I have several categories (positions) like Permanents, PhDs and I would like to list the different items (members) in a different grid each time, depending on their category.
To sketch it, I would like to render something like this:
Permanents
+------+ +------+
| m1 | | m2 |
+------+ +------+
PhD
+------+ +------+ +------+
| m3 | | m4 | | m5 |
+------+ +------+ +------+
So, I went with a nested loop, one outer loop on positions, and an inner loop on members.
However, the second and third category titles are placed immediately right of the last member of the first category, i.e right of m2.
I could not find a similar example and I am not sure how to imbricate the divs to get the desired rendering, despite a lot of tries. Here is my code.
Can someone spot an obvious thing I forgot? Thanks.
---
title: "Our Team"
layout: archive
---
{% assign positions = "Permanent,PhD,Engineer" | split: "," %}
{% for pos in positions %}
<h2>{{ pos }}s</h2>
{% assign members = site.members | where: "status", pos %}
<div class="grid__wrapper">
{% for member in members %}
<div class="grid__item">
<div class="archive__item">
<div class="archive__item-teaser">
<img src="{{ member.avatar | relative_url }}" alt="{{ member.name }}">
</div>
<div class="archive__item-body">
<h3 class="archive__item-title"> {{ member.homepage }} </h3>
<div class="archive__item-excerpt">
<p>{{ member.position }}</p>
</div>
</div> <!-- end div archive__item-body -->
</div> <!-- end div archive__item -->
</div> <!-- end grid__item -->
{% endfor %}
</div> <!-- end grid__wrapper -->
{% endfor %}
rdyar
September 3, 2025, 4:10pm
2
there is a lot missing here like the actual css, a link to live page showing the issue would be more helpful, even a screen shot though the live page would be a lot better to see the css.
Is everything showing up correctly? it is just mis-aligned? sounds like a css issue.
Thanks for having a look. I did not want to make the question too bloated.
So here is a screenshot of what is rendered.
So the misalignment is that PhDsshould go at the same level as Permanents, under m1and m2. Engineersshould come under m3, m4, m5 . Notice this category has no members.
The source html for this page is the following (sorry for the length). The definitions class="grid__wrapper and so on, are present in <link rel="stylesheet" href="/assets/css/main.css"> and well loaded in the browser.
Thanks.
<!doctype html>
<!--
Minimal Mistakes Jekyll Theme 4.27.3 by Michael Rose
Copyright 2013-2025 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE
-->
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<!-- begin _includes/seo.html --><title>Our Team - Home</title>
<meta name="description" content="ICPS website. Publications, Members, Projects.">
<meta name="author" content="ICPS">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Home">
<meta property="og:title" content="Our Team">
<meta property="og:url" content="http://localhost:4001/members/">
<meta property="og:description" content="ICPS website. Publications, Members, Projects.">
<link rel="canonical" href="http://localhost:4001/members/">
<!-- end _includes/seo.html -->
<link href="/feed.xml" type="application/atom+xml" rel="alternate" title="Home Feed">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
</script>
<!-- For all browsers -->
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css"></noscript>
<!-- start custom head snippets -->
<!-- insert favicons. use https://realfavicongenerator.net/ -->
<!-- end custom head snippets -->
</head>
<body class="layout--archive" dir="ltr">
<nav class="skip-links">
<ul>
<li><a href="#site-nav" class="screen-reader-shortcut">Skip to primary navigation</a></li>
<li><a href="#main" class="screen-reader-shortcut">Skip to content</a></li>
<li><a href="#footer" class="screen-reader-shortcut">Skip to footer</a></li>
</ul>
</nav>
<div class="masthead">
<div class="masthead__inner-wrap">
<div class="masthead__menu">
<nav id="site-nav" class="greedy-nav">
<a class="site-title" href="/">
Home
</a>
<ul class="visible-links"><li class="masthead__menu-item">
<a
href="/publications/"
>Publications</a>
</li><li class="masthead__menu-item">
<a
href="/members/"
>Members</a>
</li><li class="masthead__menu-item">
<a
href="/projects/"
>Projects</a>
</li><li class="masthead__menu-item">
<a
href="/posts/"
>Posts</a>
</li></ul>
<button class="search__toggle" type="button">
<span class="visually-hidden">Toggle search</span>
<i class="fas fa-search"></i>
</button>
<button class="greedy-nav__toggle hidden" type="button">
<span class="visually-hidden">Toggle menu</span>
<div class="navicon"></div>
</button>
<ul class="hidden-links hidden"></ul>
</nav>
</div>
</div>
</div>
<div class="initial-content">
<div id="main" role="main">
<div class="archive">
<h1 id="page-title" class="page__title">Our Team</h1>
<h2>Permanents</h2>
<div class="grid__wrapper">
<div class="grid__item">
<div class="archive__item">
<div class="archive__item-teaser">
<img src="/images/members/Icon-user.png" alt="m1" />
</div>
<div class="archive__item-body">
<h3 class="archive__item-title">
m1
</h3>
<div class="archive__item-excerpt">
<p>Position</p>
<p></p>
</div>
</div> <!-- end div archive__item-body -->
</div> <!-- end div archive__item -->
</div> <!-- end grid__item -->
<div class="grid__item">
<div class="archive__item">
<div class="archive__item-teaser">
<img src="/images/members/Icon-user.png" alt="m2" />
</div>
<div class="archive__item-body">
<h3 class="archive__item-title">
m2
</h3>
<div class="archive__item-excerpt">
<p>Position</p>
<p></p>
</div>
</div> <!-- end div archive__item-body -->
</div> <!-- end div archive__item -->
</div> <!-- end grid__item -->
</div>
<p><!-- end grid__wrapper --></p>
<h2>PhDs</h2>
<div class="grid__wrapper">
<div class="grid__item">
<div class="archive__item">
<div class="archive__item-teaser">
<img src="/images/members/Icon-user.png" alt="m3" />
</div>
<div class="archive__item-body">
<h3 class="archive__item-title">
m3
</h3>
<div class="archive__item-excerpt">
<p>Position</p>
<p></p>
</div>
</div> <!-- end div archive__item-body -->
</div> <!-- end div archive__item -->
</div> <!-- end grid__item -->
<div class="grid__item">
<div class="archive__item">
<div class="archive__item-teaser">
<img src="/images/members/Icon-user.png" alt="m4" />
</div>
<div class="archive__item-body">
<h3 class="archive__item-title">
m4
</h3>
<div class="archive__item-excerpt">
<p>Position</p>
<p></p>
</div>
</div> <!-- end div archive__item-body -->
</div> <!-- end div archive__item -->
</div> <!-- end grid__item -->
<div class="grid__item">
<div class="archive__item">
<div class="archive__item-teaser">
<img src="/images/members/Icon-user.png" alt="m5" />
</div>
<div class="archive__item-body">
<h3 class="archive__item-title">
m5
</h3>
<div class="archive__item-excerpt">
<p>Position</p>
<p></p>
</div>
</div> <!-- end div archive__item-body -->
</div> <!-- end div archive__item -->
</div> <!-- end grid__item -->
</div>
<p><!-- end grid__wrapper --></p>
<h2>Engineers</h2>
<div class="grid__wrapper">
</div>
<p><!-- end grid__wrapper --></p>
</div>
</div>
</div>
<div class="search-content">
<div class="search-content__inner-wrap"><form class="search-content__form" onkeydown="return event.key != 'Enter';" role="search">
<label class="sr-only" for="search">
Enter your search term...
</label>
<input type="search" id="search" class="search-input" tabindex="-1" placeholder="Enter your search term..." />
</form>
<div id="results" class="results"></div></div>
</div>
<div id="footer" class="page__footer">
<footer>
<!-- start custom footer snippets -->
<!-- end custom footer snippets -->
<div class="page__footer-follow">
<ul class="social-icons">
<li><a href="/feed.xml"><i class="fas fa-fw fa-rss-square" aria-hidden="true"></i> Feed</a></li>
</ul>
</div>
<div class="page__footer-copyright">© 2025 <a href="http://localhost:4001">Home</a>. Powered by <a href="https://jekyllrb.com" rel="nofollow">Jekyll</a> & <a href="https://mademistakes.com/work/jekyll-themes/minimal-mistakes/" rel="nofollow">Minimal Mistakes</a>.</div>
</footer>
</div>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/lunr/lunr.min.js"></script>
<script src="/assets/js/lunr/lunr-store.js"></script>
<script src="/assets/js/lunr/lunr-en.js"></script>
</body>
</html>
rdyar
September 4, 2025, 4:35pm
4
the page html doesn’t help much, you likely have some sort of css problem.
Are you familiar with the browser dev tools/inspector? that is probably your best bet to help trouble shoot as it allows you to edit/view the css and that can help you figure it out.
<p><!-- end grid__wrapper --></p> its a little weird that this comment ended up in a p tag?
Are you doing this in a markdown file or an html file? if you are doing it in a md file try doing it in an html file.
