有没有办法将嵌套的子项与我的 css 网格对齐?

Question

我正在使用Laravel和Vue.js我有一个应用程序.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>

还有一个看起来像这样的游戏

<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

我会执行以下操作：

创建一个文件，名称为片段.js

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

在 U 组件中，您可以像下面这样使用它：

<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>

工作示例可以在这里找到