I think this PR is ready for review, let me know what you think 🙂

Here are some explanations to ease the code review:

• there is a new div .sphx-glr-thumbnails which is the parent div of all gallery items. It is a css grid (flexbox doesn't render well with justify-content: space-between)
• .sphx-glr-thumbcontainer is now light/dark theme compatible; it uses flexbox to align children horizontally
• instead of using HTML figure + figure caption to generate thumbnails, we now have img + div with text
• an HTML a link covers the entire .sphx-glr-thumbcontainer for users to click
• prettified theme_override.css with prettierjs 💄
• overall, this yields a shorter template for .sphx-glr-thumbcontainer (fewer lines), so I needed to update tests accordingly (in particular test_full.py:test_minigallery_directive)
• documented changes in the changelog

I tested this on a new version of nilearn's documentation and it feels nice:

@lucyleeow do you want to look first?

My only note is: is this comment relevant? #905 (comment)

Here are some thoughts about the comment.
This PR changes the DOM structure of thumbnails. The <figure> and <figcaption> elements are turned into an <img> and a <div> respectively. It will most likely disable user's custom CSS although it won't throw an error 🙂

In order for users to have clear instructions on how to update their custom CSS, I think I could write a comment with all needed details in this PR, and add a link to it in the changelogs.

I tested this out locally on MNE-Python's sphinx gallery page and it worked well! @alexisthual have you also tested it locally on some projects you currently maintain/contribute to? If so, +1 for merge from me, except just one more thing...

I think I could write a comment with all needed details in this PR, and add a link to it in the changelogs.

Indeed I think this would be valuable. Feel free to push this, and @lucyleeow and I can give it a read and merge!

I tested this out locally on MNE-Python's sphinx gallery page and it worked well!

Yaaaay, glad to hear that 😄

@alexisthual have you also tested it locally on some projects you currently maintain/contribute to?

I am actually contributing this as part of a big theme refactoring for nilearn (see relevant PR if you're interested). We are switching to furo, and this PR works great with this theme.

Indeed I think this would be valuable. Feel free to push this,

Great, I'll do this soon!

We are switching to furo, and this PR works great with this theme.

Okay great -- MNE uses pydata-sphinx-theme so it's good to know it looks good in multiple themes

Thumbnail CSS migration guide

In case your project includes some custom css dedicated to sphinx-gallery thumbnails, here are some pointers on how to update it.

Thumbnail

Concerning .sphx-glr-thumbcontainer divs, inner class names as well as overall DOM structure were modified.

Previous thumbnail DOM structure:

<div class="sphx-glr-thumbcontainer" tooltip="{tooltip}">
  <div class="figure align-default">
    <img />
    <p class="caption">
      <span class="caption-text">
        <a class="reference internal">
          <span class="std std-ref">{link}</span>
        </a>
      </span>
      <a class="headerlink">¶</a>
    </p>
  </div>
</div>

New thumbnail DOM structure:

<div class="sphx-glr-thumbcontainer" tooltip="{tooltip}">
  <img />
  <p>
    <a class="reference internal">
      <span class="std std-ref">{link}</span>
    </a>
  </p>
  <div class="sphx-glr-thumbnail-title">{link}</div>
</div>

Your custom css should be modified to match these new class names.
Most likely, your changes should only concern the img and div.sphx-glr-thumbnail-title.

Thumbnails grid

Thumbnails are now displayed using css grids instead of css float.
A new parent div was added to align thumbnails:

<div class="sphx-glr-thumbnails">
  <div class="sphx-glr-thumbcontainer">...</div>
  <div class="sphx-glr-thumbcontainer">...</div>
  ...
</div>

You can tweak the grid behaviour by modifying .sphx-glr-thumbnails in your custom css file.
In particular, you can change the thumbnail's min-width by modifying

.sphx-glr-thumbnails{
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

This line tells the grid to have as many columns as 160px-width divs fit, and then expands these columns to occupy the entire space.

Indeed I think this would be valuable. Feel free to push this, and @lucyleeow and I can give it a read and merge!

I just added a comment above (which can easily be edited) and a link to the changelog.

Also, I added one last change to make the grid columns responsive. Each column will be at least 160px (so that two columns can fit on smartphones), but these columns will be able to grow if more space is available (they can't grow too much though, if not it means we could add a new column).
Here are some tests on a variety of small screen sizes, I think it works well!

I would be tempted to add this to faq.rst as a section with something like 'Why has my thumbnail appearance changed?'

Done 🙂 The new subsection in the FAQ mainly contains a link to the migration guide and to the PR.

Thanks @alexisthual !