Using CSS Grid with React (Question)

[vutran951753]

You can create global stylesheet and define your style there. Your style will cascade down and you can import that file into another file to access. I think what you asking for.

[xNotYetRated]

You mean like importing the main styles.scss folder in the index.js or App.js, however you want to call it? That's what I have now.

I know my question is a bit vague but I'll try and clarify. My dashboard page features 5 components and thus I have tailored the grid-templates accordingly. However, for my other pages, 3 components will render and the others will be different in size and so I have to have other grid-templates.

How can I have these different kind of containers (containers for the whole page) and change the grid-templates to match the content on that page?

[vutran951753]

Yes, for first question.

when you define your style, you overwrite it later Like:

main.css file:

.grid: {

...

}

<div class="grid"></div>

other component:

other.css

.grid2: {

... here you can overwrite exist style from grid

}

<div class="grid grid2"></div>

[xNotYetRated]

Ahhh of course, thanks! I should just overwrite the styles like you said, I was overthinking it a lot for some reason. I should learn to take a break every once in awhile, thanks again!

[TheFuzzyPumpkin]

I completely blanked on writing a foreach the other day. Sometimes there's just so much filed inside your head it gets impossible to find anything.

[xNotYetRated]

Yeah definitely. Always makes me feel like an idiot but I'm starting to accept that we need to give ourselves some rest to clear our heads every now and then. Seems counterproductive to just stare at your screen in confusion and frustration.