I have a unique situation with a nested component I would like to span 2 columns of the parent grid, however, the content that shows the expanded content only shows in one column and I cannot span the content to be both of the parent grid columns.

See screenshot of what is currently in place and what it would look like.

r/webdev - Tricky CSS Grid Override - VueJS (Nuxt) / TailwindCSS

The staging site is here: https://sarokis.netlify.app/menu/royal-oak/

Here is the GitHub Repo: https://github.com/joeelia/sarokis
And here is the area of code that should override the columns: https://github.com/joeelia/sarokis/blob/master/components/Menu/BlokMenuCard.vue#L31

I believe this can only be achieved with DOM manipulation by injecting the child component to be part of the parent and I have tried that, but it either doesn’t work or makes the ‘SUBS’ menu card drop down to the next line which isn’t what the design calls for.

Any tips?

Source link

Write A Comment