grid-template-areas not rendering Vue JS

Question

Very confused because I copy pasted the style from a previous project that works without issue. Using VueJS and the initial app won't properly display the grid-area template. Searched through all the similar questions, not results. Any help is 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>

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"

This worked in my previous app, but following the comments below I did this:

#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;
}

Still doesn't work. Neither does the below:

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

That's not how it works, You need to specify the grid area for the element using grid-area: history-cont; — user7148391
– user7148391, Commented May 23, 2020 at 13:33
Not sure why this worked in a previous implementation then. After reading your comment (and returning to the MDN grid-template-areas docs) I changed my code, edited in original post — notmynamelastname
– notmynamelastname, Commented May 23, 2020 at 14:11

tao · Accepted Answer · 2020-05-23 15:10:04Z

1

You're using ids as selectors for your grid areas but you're not assigning those ids to each individual component.

Once you place each id correctly on each element, it starts working:

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

See it here: https://codesandbox.io/s/fancy-cookies-p68ei?file=/src/App.vue

Alternatively, you can change your selectors to any CSS selector expression actually matching the element you want to style.
That's how CSS works :)

Important: the strings used in parent's grid-template-areas property have to match those used in children's grid-area property exactly. Vue does not magically convert them from camelCase to kebab-case as it does for attributes or component names.

To be exact, this particular issue is not influenced by Vue at all. It would work/fail the same in plain HTML + CSS, React or Angular or whatever else.

edited May 23, 2020 at 15:10

answered May 23, 2020 at 14:58

tao

91.1k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

notmynamelastname Over a year ago

Each component's template had a div with an id matching the grid area declaration; being new to Vue I thought this would be recognized in the #App component. Thanks!

tao Over a year ago

@notmy: the element bearing the id needs to be an immediate child of the display:grid element. Can't be nested. That's how CSS grid works.

Collectives™ on Stack Overflow

grid-template-areas not rendering Vue JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related