Best practices for nested Grids #9620
-
|
Hi, after reviewing the guidelines and examples for the Carbon Grid system I did not find any information on best practices for implementing / using a nested grid (e.g. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Hey @clhenrick 👋 Thanks for bringing this up - this is one shortfall of the current grid implementation. Nested grids unfortunately won't adhere to the parent grid's parameters. As such, typically columns in nested grids will need to use the various utility classes to add or remove margin/padding to ensure the columns align. In the next major version of Carbon we are anticipating better support for nested grids as we add a new implementation based on CSS Grid. Using custom properties we've been able to provide correct column definitions in nested grids. It's currently in beta and a work in progress. So it's not fully documented and doesn't have much guidance surrounding it yet, but you can preview what we've been working on in this storybook. |
Beta Was this translation helpful? Give feedback.
Hey @clhenrick 👋 Thanks for bringing this up - this is one shortfall of the current grid implementation. Nested grids unfortunately won't adhere to the parent grid's parameters. As such, typically columns in nested grids will need to use the various utility classes to add or remove margin/padding to ensure the columns align.
In the next major version of Carbon we are anticipating better support for nested grids as we add a new implementation based on CSS Grid. Using custom properties we've been able to provide correct column definitions in nested grids. It's currently in beta and a work in progress. So it's not fully documented and doesn't have much guidance surrounding it yet, but you ca…