# Gridified list of people, one grid by category

**URL:** <https://talk.jekyllrb.com/t/gridified-list-of-people-one-grid-by-category/10153>\
**Category:** Help\
**Created:** [September 2, 2025, 4:45pm UTC](https://talk.jekyllrb.com/t/gridified-list-of-people-one-grid-by-category/10153 "2025-09-02T16:45:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![duanegris](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/duanegris/32/6408_2.png) [@duanegris](https://talk.jekyllrb.com/u/duanegris)\
**Post date:** [September 2, 2025, 4:45pm UTC](https://talk.jekyllrb.com/t/gridified-list-of-people-one-grid-by-category/10153/1 "2025-09-02T16:45:07Z")

</div>

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:

```auto
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.

```auto
---
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 %}

```

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [September 3, 2025, 4:10pm UTC](https://talk.jekyllrb.com/t/gridified-list-of-people-one-grid-by-category/10153/2 "2025-09-03T16:10:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![duanegris](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/duanegris/32/6408_2.png) [@duanegris](https://talk.jekyllrb.com/u/duanegris)\
**Post date:** [September 3, 2025, 5:38pm UTC](https://talk.jekyllrb.com/t/gridified-list-of-people-one-grid-by-category/10153/3 "2025-09-03T17:38:24Z")

</div>

Thanks for having a look. I did not want to make the question too bloated.

So here is a screenshot of what is rendered.

 ![screenshot](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/f/f519ff9050241c36fcbba4e60960c632d107bf8b.jpeg)

So the misalignment is that `PhDs`should go at the same level as `Permanents`, under `m1`and `m2`. `Engineers`should 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.

```auto
<!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">&copy; 2025 <a href="http://localhost:4001">Home</a>. Powered by <a href="https://jekyllrb.com" rel="nofollow">Jekyll</a> &amp; <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>

```

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [September 4, 2025, 4:35pm UTC](https://talk.jekyllrb.com/t/gridified-list-of-people-one-grid-by-category/10153/4 "2025-09-04T16:35:55Z")

</div>

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.