Skip to article frontmatterSkip to article content
Site not loading correctly?

This may be due to an incorrect BASE_URL configuration. See the MyST Documentation for reference.

Page Layout

The myst-theme page layout is built on a CSS grid system with three variants. Each bar below uses the actual CSS class as its label. Each is generated with the {div} directive.

We intentionally leave the primary and secondary sidebars visible so that you can see how they relate to one another in size, but normally you’d remove one or the other if you wanted to use many of these classes.

article-grid

col-screen

col-page

col-page-inset

col-body-outset

col-body (default)

col-body-inset

col-middle

col-margin-left

col-body

col-margin

col-margin-right-inset

col-body-left

col-body-right

col-gutter-left

col-gutter-right

col-gutter-page-left

col-gutter-page-right

article-left-grid

col-screen

col-page

col-page-inset

col-body-outset

col-body (default)

col-body-inset

col-middle

col-margin-left

col-body

col-margin

col-margin-right-inset

article-center-grid

col-screen

col-page

col-page-inset

col-body-outset

col-body (default)

col-body-inset

col-middle

col-margin-left

col-body

col-margin