Dynamic Side-by-side Listings

[ForBo7]

Hello.

Back in my previous post here, I asked how I could get two listings to display side-by-side. I got a helpful solution which produced what I was aiming for.

::::: {.columns}

:::: {.column width="45%"}
## Lab Reports

:::{#lab-reports}
:::
::::

:::: {.column width="45%"}
## Meeting Notes

:::{#meeting-notes}
:::
::::

:::::

However, when I resize my window so that it becomes more narrow, the listings become too squished.

I would like to make the two listings to come one after the other when the window becomes narrow, and display side-by-side when the window becomes wide. How can I go about doing that?

I appreciate any input!

[dragonstyle]

To accomplish this, I think you'll have to layout the columns manually yourself. Here is a very simple proof of concept for this using CSS grid:

---
title: "blog"
listing:
  - id: listing-1
    contents: posts
    sort: "date desc"
    type: default
    categories: false
    sort-ui: false
    filter-ui: false
  - id: listing-2
    contents: posts
    sort: "date desc"
    type: grid
    categories: false
    sort-ui: false
    filter-ui: false

page-layout: full
title-block-banner: true
---


```{=html}
<style>

@media screen and (min-width: 1000px) {
  .custom-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: solid red 1px;
  }
}

.custom-columns > div {
    border: solid green 1px;
}

@media screen and (max-width: 999px) {
  .custom-columns {
    display: grid;
    grid-template-columns: 1fr;
    border: solid purple 1px;
  }
}

</style>
```

:::{.custom-columns}

:::{#listing-1}


:::


:::{#listing-2}

:::

:::

[ForBo7]

Thank you for your response!

I also managed to implement it with CSS grids too. 🙂

Another user who commented here (mcanouil) suggested to use Bootstrap Grids. It reminded me that I used CSS Grids once, and then I managed to implement it through that!

Here's my implementation.

:::::{.grid}

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

:::{#first-listing}
:::

::::

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

:::{#second-listing}
:::

::::

:::::

[mcanouil]

Another solution would be to use Boostrap CSS (included in Quarto) to define your grid layout, especially using the responsive classes (https://getbootstrap.com/docs/5.2/layout/grid/#responsive-classes).
See: https://getbootstrap.com/docs/5.2/layout/grid/ and https://getbootstrap.com/docs/5.2/layout/columns/
(I can't make an example right now)

[mcanouil]

This is what I was talking about.
Nicely done 👏

[mcanouil]

@ForBo7 By the way, the classes you used are Bootstrap classes (built on top of the original CSS grid framework). 😏

For reference, the Grid approach is described in https://quarto.org/docs/output-formats/page-layout.html#css-grid.

[mcanouil]

For the native Bootstrap grid system, the following should work:

::::::{.container}

:::::{.row}

::::{.col-12 .col-md-6}

:::{#first-listing}
:::

::::

::::{.col-12 .col-md-6}

:::{#second-listing}
:::

::::

:::::

::::::

Edit: It does not work for some reasons as if the classes did not exist ... (they do in Bootstrap 5.1 which is the embedded version of Quarto).
I opened a new discussion, see #2841.

[ForBo7]

@ForBo7 By the way, the classes you used are Bootstrap classes (built on top of the original CSS grid framework). 😏

For reference, the Grid approach is described in https://quarto.org/docs/output-formats/page-layout.html#css-grid.

Ah, I see; good to know. That link is also where I first learned about this Grid approach. I got to say, I'm liking this abstraction. Makes the creation of a website pretty approachable without diving into the nitty gritty of HTML/CSS.

Edit: It does not work for some reasons as if the classes did not exist ... (they do in Bootstrap 5.1 which is the embedded version of Quarto).

Yeah, it didn't work for me either. I initially created it similarly to your implementation, but it didn't work.

[mcanouil]

It's because Quarto disable the classes by default, you can see more details in #2841.