How do I create cards/callouts of the same height and positioned next to each other?

[joelostblom]

Description

In Jupyter Book, I can start a page with an overview of important information laid out next to each other horizontally using a grid of cards:

I can't seem to find something similar in Quarto. The closest I have gotten is using layout-col=2, together with either callouts or cards:

As you can see in the image, there are a few significant issues:

1. Most importantly, each card/callout is of different height, which ruins the impression that they are part of the same component. Can I control the height to expand to the available height within the column layout? (I tried expandable='true' to no avail)
2. The formatting of the cards is rather ugly, lacking both margins of the text to the border, a drop shadow to the background, and the horizontal line under the title (while I can add this manually, the spacing to the title text is odd so that it is not vertically centered).

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

This being said you can add any arbitrary attributes style="height:200px" to a callout or any fenced div.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ```  The end. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ```  The end. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[mcanouil]

Note that the issue is unrelated to Quarto and is pure CSS/HTML issue, which can probably be fixed by defining some rules.

[joelostblom]

I think it is related to quarto in the sense of which default rules are defined. As in the link above to Jupyter Book's grid element, that's also done through CSS but the default config is such that it works very well for creating a grid layout whereas layout-col in quarto does not currently. Do you have an idea of what the CSS would look like?

[mcanouil]

Use your favourite browser inspect/developer mode to see the CSS.
Note that Quarto uses Bootstrap and is "all" described in the documentation, see https://quarto.org/docs/output-formats/html-themes.html.
Also callouts and layout are not cards or grids, if you want to make a grid, then use a grid, see https://quarto.org/docs/output-formats/page-layout.html#css-grid.

[joelostblom]

Thanks for mentioning grid, this is what I was asking about in my question and seems much closer to how it is done in JupyterLab. Note that it still has the issue with the content not stretching to fill the grid. I'm not a web developer and it usually takes quite some time to figure out how to do HTML/CSS customization which is why I use Quarto/JupyterBook instead of web frameworks directly. After some fiddling it seems like all that is needed is to set display:flex on the grid columns; I think this would be a convenient default for quarto to set on all grids if possible similar to how it is done in JupyterBook. I'm including the setup that worked for me below if someone else comes across this looking for the same thing.

.g-col-6 {
    display: flex
}

::::: {.grid}

:::: {.g-col-6}

::: {.callout-note appearance="minimal"}
## Lecture learning goals

1. Motivate the need to use a dashboard framework
2. Understand the pros and cons with Dash and Shiny
3. Identify how a Dash/Shiny app is designed conceptually
4. Run a Dash/Shiny app on a local server
5. Create input widgets (dropdowns, sliders, etc)
6. Set up callbacks that update the app based on user input
7. Create an Altair/ggplot charts in dashboards
8. Update charts via input widgets

:::
    
::::

:::: {.g-col-6}

::: {.callout-note appearance="minimal"}
## Required activities

- There are several optional readings linked throughout these notes where you can learn more about Dash and Shiny.

*You can read these either before or after class*               

:::

::::

:::::

[mcanouil]

I'm not a web developer and it usually takes quite some time to figure out how to do HTML/CSS customization which is why I use Quarto/JupyterBook instead of web frameworks directly.

Never Quarto or JupyterLab will ever come close to raw HTML/CSS. When you want advanced customisation, I am afraid there is no shortcut beside learning the language.
The same will apply to LaTeX, Typst, OpenXML (Word), etc.

It's not possible to map everything from other languages as the combination are nearly infinite.

I think this would be a convenient default

I strongly disagree with that. It only serves your purpose while grid is a general framework.

[joelostblom]

It only serves your purpose while grid is a general framework.

To be clear, I don't mean to replace the grid framework with something that only works for me, that would indeed be undesirable.

I think there might be something we are missing here, because when I read about grid the illustrations that are used tend to show that all items in the same row are of the same height. When adding rows/text to one of them, the default behavior seems to be that they all resize their height equally to remain aligned (as the name "grid" suggest), e.g. this link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout.

[mcanouil]

Your link is unrelated.
As I said, it's Bootstrap: see https://getbootstrap.com/docs/5.3/layout/css-grid/#how-it-works
Note that the link I shared also link back to Bootstrap.

Again, your use case is not general (using 1.5 for the lipsum shortcode).
The issue is not the grid.

Quarto document	HTML
--- title: "Quarto Playground" format: html --- This is a playground for Quarto. ::: {.grid style="border: 1px solid #ccc;"} ::: {.g-col-4 style="border: 1px solid #22b222;"} {{< lipsum 1 >}} ::: ::: {.g-col-8 style="border: 1px solid #b22222;"} {{< lipsum 1 >}} ::: :::

[joelostblom]

Thanks for the example, I think I get it now. What is shown as being of equal height in both the link you shared and the one I shared is the grid cell itself; not the content within the grid cell. The fact that the content I'm working with (the card/callout) has a border confused me, but I can see in this example that the border of e.g. a card is by default resized to its content rather than the available vertical space within the grid cell: https://stackblitz.com/edit/zvqkwg?file=index.html

I could maybe get what I am looking for by adding a border and gap to the grid itself, but I'm happy with the solution above.