Feeling a bit lost as I copied the style from a previous project that worked flawlessly. Currently using VueJS and encountering issues with the grid-area template not displaying properly in the initial app. Despite searching through similar questions, I haven't found any helpful results. Any assistance would be greatly appreciated!
<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>
Attempting to replace the grid-template-areas names with the imported component names didn't yield the desired result:
grid-template-areas:
"History SearchBar Bookmarks"
"History VideoView Bookmarks"
In my previous app, this solution worked, but following the suggestions below, I tried:
#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;
}
Despite all attempts, the issue persists. The following approach also did not work:
#app > bookmarks-cont{
grid-area: bookmarks-cont;
}