How do you effectively use CSS grid layouts with React?
I am currently building a single page application using ReactJs grid layouts and CSS to lay out and style components.
However, the two technologies don't feel like they fit together well: CSS grid layouts can (easily) be applied to descendant elements (grid items) of the parent container. But the very nature of ReactJS means shared components with great childhood components and even great kids.
As an example:
Component tree react: Application> ToDoList> ToDo item> More ...
If, onClick, I want to move the "ToDo Item" to grid-row: 1 from the "App" component, it seems the only way to do this is to have a ToDoList for itself as the grid of the entire application component. This then causes problems with the layout of other elements on the page.
Am I correct in that these two approaches do not go well with each other, or is this a flaw in my understanding of the two technologies?
source to share
You are correct, subgrids were deprecated from the CSS Grid Candidate Recommendation ( https://github.com/w3c/csswg-drafts/issues/958 ).
Hopefully they will reappear, they seem to be really useful for simplifying complex layouts. I just found CSS grid to be useful when laying out the top layer of an app-to-app or container.
source to share