Search code examples
textlayoutmultiple-columnsquarto

Two columns layout in Quarto

Quarto

I am creating a website in Quarto and would like to have a two columns layout so I can nicely show text side by side. In streamlit you can use columns to get a two columns layout. Here is an example code of how to layout should look like:

---
title: "Two columns layout Quarto"
format: 
  html:
    code-fold: true
engine: knitr
---

I would like to have text here                                               and here

Sentence becomes longer, it should automatically stay in their column        More text

Output:

enter image description here

As you can see the text is combined into one sentence, while I would like to have it separately like a two columns layout. So I was wondering if this is possible in Quarto?

Streamlit

Here is an example in streamlit:

# Package
import streamlit as st

# Function with columns
def txt(a, b):
    col1, col2 = st.columns([7,2])
    with col1:
        st.markdown(a)
    with col2: 
        st.markdown(b)

# Example
st.write('# Example in Streamlit')
txt('I would like to have text here', 'and here')

Output:

enter image description here

As you can see this is nicely shown in two column layout.

Solution

  • You can use pandoc .columns div to create column layout

    ---
title: "Two columns layout Quarto"
format: 
  html:
    code-fold: true
engine: knitr
---

:::: {.columns}

::: {.column width="70%"}
I would like to have text here

Sentence becomes longer, it should automatically stay in their column
:::

::: {.column width="10%"}
<!-- empty column to create gap -->
:::

::: {.column width="20%"}
and here

More text
:::

::::

    Two column layout