如何在Svelte中全局使用CSS Grid？避免路由组件代码重复

1. 用布局组件统一包裹路由内容 #

这是Svelte里避免重复布局代码的核心方法，你之前尝试布局组件失效，大概率是结构没处理对。正确操作如下：

• 新建Layout.svelte组件，把网格样式写在这里，用<slot />承载路由内容：

<!-- Layout.svelte -->
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 200px 1fr; /* 示例：固定文本区 + 自适应滚动区 */
    height: 100vh;
    overflow: hidden;
  }

  .fixed-text {
    position: sticky;
    top: 0;
    height: 100vh;
    /* 固定文本过长时可选开启滚动 */
    /* overflow-y: auto; */
  }

  .scroll-content {
    overflow-y: auto;
    height: 100vh;
  }
</style>

<div class="grid-container">
  <div class="fixed-text">
    <!-- 固定文本可以写死，也可以用slot让路由自定义 -->
    <slot name="fixed" />
  </div>
  <div class="scroll-content">
    <slot /> <!-- 路由的滚动内容在这里渲染 -->
  </div>
</div>

• 在路由根组件（比如App.svelte）里统一用这个布局包裹所有路由：

<!-- App.svelte -->
<script>
  import { Router, Route } from 'svelte-spa-router';
  import Layout from './Layout.svelte';
  import Home from './Home.svelte';
  import About from './About.svelte';
</script>

<Router>
  <Route path="/">
    <Layout>
      <Home />
    </Layout>
  </Route>
  <Route path="/about">
    <Layout>
      <About />
    </Layout>
  </Route>
</Router>

这样所有路由自动套用网格布局，不用每个组件重复写样式。

2. 全局样式的正确用法 #

之前全局设置无效，大概率是Svelte样式隔离的问题，正确操作：

• 在app.css里直接写全局网格样式，不用加:global()包裹类名：

/* app.css */
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100vh;
  overflow: hidden;
}

.fixed-text {
  position: sticky;
  top: 0;
  height: 100vh;
}

.scroll-content {
  overflow-y: auto;
  height: 100vh;
}

• 把grid-container类加在最外层的容器（比如布局组件的根元素）上，不要在每个路由的<main>上重复添加。

3. Svelte项目中网格样式的最佳存放位置 #

• 布局组件内部：如果这个网格是全应用通用布局，优先写在布局组件里，样式和结构绑定，维护起来更方便，符合Svelte组件化思想。
• 全局样式文件（app.css）：如果多个不同布局需要复用基础网格规则，可以把通用规则抽出来放这里，通过类名复用。
• 预处理器混合宏：如果用了SCSS这类预处理器，可把网格样式写成mixin，在需要的组件里导入使用——但这种适合有多种网格变体的场景，通用布局还是推荐布局组件。

排查之前布局组件失效的常见原因 #

• 布局容器没设置足够高度（比如没加height: 100vh），导致网格无法占满视口。
• 路由内容没正确放入布局的<slot>，或者路由内部元素用了position: absolute这类破坏网格的样式。
• 网格的行列/区域定义有误，导致内容没分配到正确空间。

内容的提问来源于stack exchange，提问作者SnooDucks299792