有没有一种方法可以将嵌套的子项与我的CSS网格对齐？

Question

我正在使用Laravel和Vue.js，并且有一个看起来像这样的Application.vue

<template>
  <div id="application-container" class="grid">
      <VueHeader></VueHeader>
      <router-view></router-view>
  </div>
</template>

<script>
import VueHeader from '@/components/widgets/VueHeader';
export default {
    components:{VueHeader}
}
</script>

<style>
.grid{
    display:  grid;
    grid-template-rows: repeat(10, 1fr);
    grid-template-columns: repeat(10, 1fr);
    background-color: #F2F2F2;
    height: 100vh;
}
</style>

还有一个看起来像这样的Game.vue

<template>
    <div id="game-container">
        <div id="game-component-menu"></div>
        <div id="game-component-area">Game</div>
    </div>
</template>

<script>
export default {
    name: 'Game'
}
</script>

<style scoped>
#game-container{
    grid-column: 2 / 11;
    grid-row: 1 / 11;
}

#game-component-menu{
    grid-column: 1 / 11;
    grid-row: 2 / 11;
    background-color: #E3E3E3;
}

#game-component-area{
    grid-column: 1 / 11;
    grid-row: 3 / 11;
    background-color: #F2F2F2;
}
</style>

路由器视图正在显示游戏组件。问题在于游戏组件需要具有一个div游戏容器来包装菜单和区域，因为模板中不能有多个div。这导致我的网格停止为游戏容器的子元素工作。如何在不嵌套更多网格的情况下解决此问题。我想在整个应用程序中使用Application.vue中的网格。

Answer 1

我会这样做：

创建文件，名称为Fragment.js

export default {
  functional: true,
  render(h, ctx) {
      return ctx.children;
  }
};

在您的组件中，您可以像下面这样使用它：
<template>
    <Fragment>
        <div id="game-component-menu"></div>
        <div id="game-component-area">Game</div>
    </Fragment>
</template>
<script>
import Fragment from '../Fragment'; // update the path as per your directory structure.
</script>

可以找到工作示例here