Grid layout with auto-adjusted sizes would be amazing in Reveal

[kjohnsen]

I'm loving making Reveal.js presentations with Quarto. However, I struggle to get sizes right when I want to use a grid layout. I've been using the figure panel classes to make grids, which seems to get image sizes right for one row, but not for more. For example,

:::{layout="[[1,1],[1]]"
![](img1.jpg)
![](img2.jpg)
![](img3.jpg)
:::

often produces output that doesn't fit on the page (that is, img3 is down below, running off the slide). It looks like width of each subpanel is matched well but not height. Having this grid layout automatically size contents to fit on the slide would be really great

[mcanouil]

Related to:

• Is it possible to support CSS Grid in Quarto slides? #6166

To note, this is tricky because of the way Reveal.js builds the components.

One workaround is to play with the following CSS rule to constrain the maximum absolute height that your images can take.

.quarto-layout-cell img {
  max-height: 300px;
}