Troubleshooting listing only pages under specific directory

This seems to be a common problem and I’ve tried my best to spend time searching the forums for a solution that would work for me.

My folders are arranged in the following structure:

.
...
├── content
|   ├── submissions
|   |   ├── test.md
|   |   ├── test1.md
|   |   └── test2.md
...

I have a partial called listing.html which I am calling on my homepage to display the files under submissions folder (all files such as test.md, test1.md etc.). This is what listing.html looks like:

<div class="grid grid-flow-row xl:grid-cols-3 sm:grid-cols-1 gap-10 py-10">
    {{ range where .Pages "Type" "submissions" }}
   // Do some range stuff
        {{ end }}
</div>

However, this loads only this listing:

I have to click on this listing to be shown the pages under the submissions folder, like so:

This is what I would like to show on my homepage. Based on the past questions in this forum, I’ve tried changing my range query to something such as:

{{ range where .Pages "File.Dir" "in" "/submissions/" }} (This question)

{{ range where .Pages "Section" "submissions" }} (This question)

Some of the older questions involve creating a new listing layout for the submissions type, and I’m wondering if its bad practice if I’m using a separate partial to create listings. Is that the case?

My website is hosted here: http://srishtiarchive.com/
Git Repo: GitHub - thedivtagguy/srishtiarchives

What you can do is:

{{ $section := site.GetPage "submission" }}
{{ range $section.Pages }}
{{ end }}
{{ range $section.RegularPages }}
{{ end }}
{{ range $section.RegularPagesRecursive }}
{{ end }}

The 3 range examples do 3 different things, my guess is you want the second.

Thank you for your answer, this works perfectly! Would you also be able to tell me the logic behind why this works (and not what I had), so I can try resolving this on my own next time?