horizontal
.
.. subfigure:: AB

   .. image:: image.png
      :alt: hallo

   .. image:: image.png
      :alt: hallo
.
<figure class="sphinx-subfigure align-default">
<div class="sphinx-subfigure-grid ss-layout-default-AB" style="display: grid;">
<div class="sphinx-subfigure-area" style="display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: A;">
<img alt="hallo" src="_images/image.png"/>
</div>
<div class="sphinx-subfigure-area" style="display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: B;">
<img alt="hallo" src="_images/image.png"/>
</div>
</div>
</figure>
.

vertical
.
.. subfigure:: A|B

   .. image:: image.png
      :alt: hallo1

   .. image:: image.png
      :alt: hallo2
.
<figure class="sphinx-subfigure align-default">
<div class="sphinx-subfigure-grid ss-layout-default-A_B" style="display: grid;">
<div class="sphinx-subfigure-area" style="display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: A;">
<img alt="hallo1" src="_images/image.png"/>
</div>
<div class="sphinx-subfigure-area" style="display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: B;">
<img alt="hallo2" src="_images/image.png"/>
</div>
</div>
</figure>
.

span columns
.
.. subfigure:: AA|BC

   .. image:: image.png
      :alt: hallo1

   .. image:: image.png
      :alt: hallo2

   .. image:: image.png
      :alt: hallo3
.
<figure class="sphinx-subfigure align-default">
<div class="sphinx-subfigure-grid ss-layout-default-AA_BC" style="display: grid;">
<div class="sphinx-subfigure-area" style="display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: A;">
<img alt="hallo1" src="_images/image.png"/>
</div>
<div class="sphinx-subfigure-area" style="display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: B;">
<img alt="hallo2" src="_images/image.png"/>
</div>
<div class="sphinx-subfigure-area" style="display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: C;">
<img alt="hallo3" src="_images/image.png"/>
</div>
</div>
</figure>
.

subcaptions
.
.. subfigure:: AB
   :subcaptions: above

   .. image:: image.png
      :alt: hallo1

   .. image:: image.png
      :alt: hallo2
.
<figure class="sphinx-subfigure align-default">
<div class="sphinx-subfigure-grid ss-layout-default-AB" style="display: grid;">
<div class="sphinx-subfigure-area" style="display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: A;">
<span class="caption">hallo1</span>
<img alt="hallo1" src="_images/image.png"/>
</div>
<div class="sphinx-subfigure-area" style="display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: B;">
<span class="caption">hallo2</span>
<img alt="hallo2" src="_images/image.png"/>
</div>
</div>
</figure>
.
