Menu
I'm currently building a Single Page Application using ReactJs and CSS grid layouts for the placement and styling of components.
However, the two technologies don't feel like they go together well: CSS grid layouts can only (easily) be applied to children elements (grid items) of the parent container. But the very nature of ReactJS means components with grand-children components and even great-grand-children are common.
As an example:
React component tree: App > ToDoList > ToDo Item > Details...
If, onClick, I want to move the 'ToDo Item' to grid-row: 1 of the 'App' component it seems the only way to do so is for ToDoList to itself be a grid of the entire App component. This then causes layout issues of other elements on the page.
Am I right in thinking these two approaches don't play well together, or is it a flaw in my understanding of the two technologies?
615
First, add the following code to your React application: Check it out! You just created a CSS Grid! To dry out your code, you can also pass props to your Grid component to determine the number of Grid elements you need.
In web design, the grid becomes a set of constraints that tie the elements together but also allow elements to dictate the grid. CSS Grid is an indispensable tool for web designers, as it helps them create genuinely responsive layouts.
You're right, subgrids were deprecated from the CSS Grid Candidate Recommendation (https://github.com/w3c/csswg-drafts/issues/958).
Hopefully they'll reappear, they seem really useful for simplifying complicated layouts. I've only found CSS grid to be useful laying out the top level of an react application or a container.
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
