css - 带有单文件 Vue 组件的嵌套 CSS 网格

Question

谁能告诉我如何正确实现父网格和子网格的示例（使用标准 Webpack 模板的约定）？App.vueHello.vue

我尝试了以下方法，但子网格似乎不起作用。

应用程序.vue

<template>
  <div id="app">
      <div id="top"></div>
      <div id="bottom"><router-view></router-view></div>
  </div>
</template>


<script>
 export default {
     name: 'app',

 }
</script>


<style>
#app {
    display: grid;
    grid-template-rows: 1fr 2fr;
 }
 #top {
     background: blue;
 }
 #bottom {
     background: green;
 }
</style>

你好.vue

<template>
    <div class="hello">

        <div id="head"></div>
        <div id="tail"></div>
    </div>
</template>

 <script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
 .hello {
     display: subgrid;
     grid-template-columns: 2fr 3fr;
 }
 #head {
     background: rgba(0, 0, 0, 0.5);
 }
 #tail {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
     background: rgba(250, 250, 250, 0.5);
 }
</style>

编辑：我都试过了grid，subgrid对于孩子的显示属性，都不管用。

这是路由器的定义：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
      {
          path: '/',
          name: 'Hello',
          component: Hello
      }
  ]
})