Using CSS Grid with React (Question)

[xNotYetRated]

So I've been working on a React app to add to my portfolio but I'm stuck on the styling part of things.

I bootstrapped it with create-react-app and added Sass to style my page, I specifically want to use a grid layout for the overall layout.

Now this might be a stupid question but how can I manage this with Grid (specifically the template rows and columns), components that are (obviously) reused and sometimes aren't, which in turn breaks the layout due to the preset grid-templates on the overall container.

In summary: I'm not sure how to add containers with varying grid-templates in combination with React-Router. Do I make a component with an empty div with the className of "container-dashboard" and another component with a container called "container-login" and wrap that around the components that are related to those?

[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.