网格模板区域未渲染Vue JS

非常困惑，因为我复制了先前项目的样式粘贴，没有问题。使用VueJS和初始应用程序将无法正确显示网格区域模板。搜索所有类似的问题，而不是结果。任何帮助表示赞赏！

<template>
  <div id="app">
    <search-bar></search-bar>
    <history-cont></history-cont>
    <video-view></video-view>
    <bookmarks-cont></bookmarks-cont>
  </div>
</template>

<script>
import Bookmarks from './components/Bookmarks'
import History from './components/History'
import SearchBar from './components/SearchBar'
import VideoView from './components/VideoView'

export default {
  name: 'App',
  components: {
    'bookmarks-cont': Bookmarks,
    'history-cont': History,
    'search-bar': SearchBar,
    'video-view': VideoView
  }
}
</script>

<style>
#app {
  display: grid;
  grid-template-rows: 55px 1fr;
  grid-template-columns: 240px 1fr 240px;
  grid-template-areas: "history-cont search-bar bookmarks-cont"
                       "history-cont video-view bookmarks-cont";
}
</style>

I've also tried replacing the grid-template-areas names with the names of the imported components, but it doesn't work:

grid-template-areas: 
"History SearchBar Bookmarks"
"History VideoView Bookmarks"

这在我以前的应用程序中有效，但是按照下面的注释，我做到了：

#app {
  display: grid;
  grid-template-rows: 55px 1fr;
  grid-template-columns: 240px 1fr 240px;
  grid-template-areas: "history-cont search-bar bookmarks-cont"
                       "history-cont video-view bookmarks-cont";
}

#app > #search-bar{
  grid-area: search-bar;
}

#app > #history-cont{
  grid-area: history-cont;
}
#app > #video-view{
  grid-area: video-view;
}
#app > #bookmarks-cont{
  grid-area: bookmarks-cont;
}

仍然不起作用。以下都不是：

#app > bookmarks-cont{
  grid-area: bookmarks-cont;
}