How to fit everthing to screen/window width?

[hopezh]

Description

I used ::: {.column-screen} to wrap all the contents in a page, including side bar on the left, contents in main page in the middle, and table of contents on the right, but everything still appears in the middle of the screen/window, rather than utilizing the full span of the screen/window.

May I ask how to achieve this?

Test repo is here, and the qmd of the page is here.

---
title: "test rhino3dm"
---

:::: {.column-screen}

(contents of the page)

::::

Screen image:

[mcanouil]

I don't understand .column-screen is only for main content as described in https://quarto.org/docs/authoring/article-layout.html.
This won't affect sidebar/margin.

Quarto document	HTML
--- format: html --- {{< lipsum 1 >}} ::: {.column-screen}  {{< lipsum 1 >}} :::

If you want to control the page layout, see https://quarto.org/docs/output-formats/page-layout.html

[hopezh]

Thanks.

I added page-layout: full in _quarto.yml:

format:
  html:
    page-layout: full

However, all the contents are still presented at the center rather than spanning to the full window width as indicated by the red arrow below:

So, I tried the grid to manually specify the width of side bar, main page, and table of contents, and it works.

format:
  html:
    grid:
      sidebar-width: 300px
      body-width: 2000px
      margin-width: 300px
      gutter-width: 1.5rem

[mcanouil]

Does the grid defining your website layout good enough solution?

[hopezh]

Yes, @mcanouil, the grid customization is a very flexible solution. Thanks.