Is it possible to support CSS Grid in Quarto slides?

[tanchangde]

Description

According to the current documentation and combined with testing, it seems that Quarto does not support CSS Grid in slides at present.

I understand that the purpose of slides is to present key information to assist the speaker in guiding audience attention. My wish for Quarto to support CSS Grid in slides is not about cramming everything into the slides. For reference, see Cheatsheets - Posit. My aim is to be able to plan page layout based on rows and columns. This would give authors a higher degree of creative flexibility.

However, I've looked through the entire Quarto official documentation and the Discussions and Issues on quarto-cli but I couldn't find any related information.

[cderv]

Quarto Slides are based on RevealJS (https://revealjs.com/) and natively there is no CSS grid support or themes.

However, maybe this could be done in a custom theme. There is a question about this

• examples of css grid themes? hakimel/reveal.js#2393

Quarto Slides can be extended using RevealJS plugin (https://quarto.org/docs/extensions/revealjs.html) and Custom themes (https://quarto.org/docs/presentations/revealjs/themes.html), so maybe a combination of both can help to use grid like layout in the viewport of a slide.

but RevealJS is all JS code creating the layout for your slides, so until it is natively / easily supported there could be some side effect. You should open a feature request there maybe for CSS grid helper and support.

[cderv]

For reference, see Cheatsheets - Posit. My aim is to be able to plan page layout based on rows and columns. This would give authors a higher degree of creative flexibility.

Regarding this layout, Dashboard and Poster like content are something we will want to offer at some point. Not through Slide though.

[tanchangde]

I think there might have been a bit of misunderstanding due to how I phrased things before. You see, when we talk about layouts like the Posit Cheatsheet, we're basically discussing cramming everything into a single page. But what I'm really after here is a layout that can be organized based on rows and columns.

I've done some homework and looked into RevealJS's documentation, only to find out it doesn't support CSS Grid.

Additionally, RevealJS seems to be a solo endeavor without many familiar secondary contributors around. That issue you brought up about CSS Grid support? It's been around for a while and still hasn't been tackled. And when I check the RevealJS repository, there's a bit of a backlog on the issues side of things.

Considering these points, I was wondering if your team might have the bandwidth to consider throwing your support behind this feature.

Anyway, thanks again for all the helpful info you've shared. I'm going to experiment with some plugins and custom themes in the meantime.

[cderv]

Considering these points, I was wondering if your team might have the bandwidth to consider throwing your support behind this feature.

Not in the short term. And probably not if it requires to modify RevealJS own library. I don't expect us to maintain a fork.

One thing to try as I said is building a theme and a reveal plugin that would help with such layout. If that can be done this way, we could think of making it built in. Though an extension if fine.

One again it depends how this would behave with RevealJS own JS code that does the rendering of the layout. That is were a plugin is interesting because it can apply at the same processing time.