Documentation: Layout Components Best Practice?

[LassiterJ]

I have been somewhat struggling using the layout components. I was wondering if there were some best practices when using them that we should be following?

Some things I wonder about would be:

• How much should we be using the Box component?
• How many layers of nesting is too much to use the Container or Section component?
• If I have a Grid component nested in a Box, is the Box even necessary?
• I also wasn't aware of the ability to add css-grid specific notation in the "columns" prop of the Grid component more examples of complex Layout Components usage would be welcomed.

[vladmoroz]

Duly noted, we’ll cover layout components in more detail

How much should we be using the Box component?

As much as needed. We use it all the time to add margin, padding, set display across breakpoints, or as a vehicle for one-off custom styles.

How many layers of nesting is too much to use the Container or Section component?

Whatever works for you, there's nothing wrong with nesting them within each other or within other components if that's what you need to achieve a particular layout

If I have a Grid component nested in a Box, is the Box even necessary?

No, if Box isn't doing anything, you don't need it

I also wasn't aware of the ability to add css-grid specific notation in the "columns" prop of the Grid component more examples of complex Layout Components usage would be welcomed.

We could document things better, yeah. How did you discover this?

[LassiterJ]

Thanks for your response. Sorry I haven't checked replies.

We could document things better, yeah. How did you discover this?

I don't remember exactly. I tend to look through the source code and experiment a bit when learning new libraries.