有没有办法将嵌套的孩子与我的 CSS 网格对齐？答案

【问题标题】：Is there a way to align nested children to my css grid?有没有办法将嵌套的孩子与我的 CSS 网格对齐？
【发布时间】：2020-01-13 13:20:59
【问题描述】：

我正在使用 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 中的网格。

【问题讨论】：

标签： vue.js css-grid

【解决方案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找到工作示例

【讨论】：