Make thumbnails grid- and flexbox-compatible

At the moment, sphinx-gallery generates a div for each gallery item. These divs are float: left and have a pre-determined width, which does not render very nicely on most screen sizes or for long titles.

I suggest that for each subsection of the gallery, we add a parent div to these item divs. This would allow users to either use css grid or flex (which we could also implement here directly). It boils down to adding a new div before iterating through each gallery item and closing this div after: https://github.com/sphinx-gallery/sphinx-gallery/blob/a68a48686138741ac38dcc15930293caeebcf484/sphinx_gallery/gen_rst.py#L371-L382

Also, maybe we could use sphinx-design to handle the grid for us, but this would add a new dependency.

Happy to here what you think about this!

[larsoner]

I tested it and it feels much nicer. This could potentially break some css added by users on top of sphinx-gallery, but I think they added this code mostly to fix the issue mentioned above.

I agree that this is most likely the case. If we can git image + caption to fit without any trickery, and make some clear note about how to adjust CSS to deal with the change, I think it can be considered a bugfix and released without a deprecation cycle.

[alexisthual]

I tried something locally:

• adding the new div is easy and does most of the job
• designing a responsive grid also works great, appart from the fact that some unexpected divs appear in the DOM due to sphinx; we’ll need a fix for this issue, otherwise we can’t use grids

My take is that we don’t need sphinx-design in the end.

However, I’d be in favour of doing a small refactoring the thumbnail. Currently, the div’s height won’t scale to it’s content’s height. I guess this is because html figure captions don’t play well with divs. It seems that a min-height is set to fix this, but it’s not the right way of doing this.

The following structure would make sense to me:

<a class="sphx-glr-thumbcontainer">
  <img />
  <div class="sphx-glr-thumb-title">title</div>
</a>

as opposed to the current structure:

<div class="sphx-glr-thumbcontainer">
  <figure class="align-default">
    <img />
    <figcaption>
      <p><span class="caption-text"><a class="reference internal"><span class="std std-ref">title</span></a> 
      </span><a class="headerlink" title="Permalink to this image">¶</a></p>
    </figcaption>
  </figure>
</div>

I tested it and it feels much nicer. This could potentially break some css added by users on top of sphinx-gallery, but I think they added this code mostly to fix the issue mentioned above.

What do you think? 🙂