Quarto HTML多屏幕20:60:20布局实现求助

Quarto 1.4版本的内置grid参数确实存在固定像素与百分比不兼容的限制，直接设置百分比会导致布局错乱或TOC丢失。要实现左侧20%侧边栏（带TOC）、中间60%内容区、右侧20%空白的需求，建议绕过内置grid配置，用自定义CSS实现：

步骤1：配置_quarto.yml #

启用左侧TOC并引入自定义CSS，同时禁用默认grid布局避免冲突：

title: "你的文档标题"
format:
  html:
    toc: true
    toc-location: left
    css: custom.css
    grid: false  # 禁用默认grid，防止样式冲突

步骤2：编写custom.css #

创建同级目录下的custom.css文件，添加以下样式覆盖默认布局：

/* 重置全局容器，消除默认空白 */
body {
  max-width: 100vw !important;
  margin: 0;
}

/* 设置侧边栏（TOC容器）宽度为20%，取消默认像素限制 */
.quarto-sidebar {
  width: 20% !important;
  min-width: unset !important;
  max-width: unset !important;
}

/* 主内容区占60%宽度，居中对齐，右侧自然留出20%空白 */
.quarto-main {
  width: 60% !important;
  margin: 0 auto !important;
  max-width: unset !important;
}

/* 移动端响应式调整：小屏幕下侧边栏全屏，内容区占90% */
@media (max-width: 768px) {
  .quarto-sidebar {
    width: 100% !important;
    position: relative !important;
  }
  .quarto-main {
    width: 90% !important;
    margin: 0 auto !important;
  }
}

关键说明 #

• 用!important强制覆盖Quarto内置的固定像素样式，确保百分比布局生效
• 禁用grid参数避免默认布局逻辑干扰自定义样式
• 媒体查询保证移动端布局可用性，不会出现侧边栏挤压内容的情况

内容的提问来源于stack exchange，提问作者Petr Hála