Two columns layout in Quarto

Question

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:

---

---

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:

---

---

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

Answer 1

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
:::

::::

---

---

Answer 2

Alternatively, you could utilize the bootstrap css grid system for such kind of questions. You would not need an additional empty column to create space, you could change columns gaps easily (see here):

---
title: "Two columns layout Quarto"
format: html
engine: knitr
---
  
  
::: {.grid}

::: {.g-col-6}

## First column 
I would like to have text here

Sentence becomes longer, it should automatically stay in their column
:::
  
::: {.g-col-6}

## Second column 

and here

More text

:::
  
:::  

Answer 3

You can also use the command layout-ncol=2 as explained in Figure Panels of the Quarto documentation:

Two columns layout Quarto (Version 1)

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

::: {layout-ncol=2}


**First column**

**Second column** 

I would like to have text here

and here

Sentence becomes longer, it should automatically stay in their column

More text

:::

Between every paragraph (here sentence) there needs to be an empty line. It may sound strange that this explanation is in the chapter about figures. But as it explained under Figure Divs:

You can treat any markdown content you want as a figure by enclosing it in Pandoc div block …

Two columns layout Quarto (Version 2)

Under the heading Custom Layouts the Quarto documentation also explains a more general approach: Instead of using layout-ncol or layout_nrow where all columns are of the same size, you can also create more complex designs with the layout attribute. In the example of the OP the first column has more text than the second column, so we could for instance to specify a column distribution of 2:1.

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

::: {layout="[[10,5], [40,20], [26,13], [2,1]]"}


**First column**

**Second column**

I would like to have text here

and here

Sentence becomes longer, it should automatically stay in their column

More text

:::

Note that the used row / column numbers in the second example are arbitrary. They just provide the desired proportion of 2:1. The code translates to "create four rows, where the first column has always the double size of the second column."