Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[system] Improve documentation on usage of layout components: Container, Grid, Box, Stack #41215

Open
thuphan27379 opened this issue Feb 21, 2024 · 2 comments
Open

[system] Improve documentation on usage of layout components: Container, Grid, Box, Stack #41215

thuphan27379 opened this issue Feb 21, 2024 · 2 comments
Assignees
@samuelsycamore
Labels
docs Improvements or additions to the documentation package: system Specific to @mui/system support: docs-feedback Feedback from documentation page support: question Community support but can be turned into an improvement

Comments

@thuphan27379
Copy link

thuphan27379 commented Feb 21, 2024 •
edited

Part of #35158

Summary

how to use Stack, Container, Box to set up the layout for whole page? is that correct? what about gird?
grid
container
stack
box
component
box
stack
container
grid

Examples

can I only use div, and not to use any stack, container or box? do I need apply grid for every component and pages?

Motivation

where and which file to setting the grid for whole page

Search keywords: stack, box, container, grid
@thuphan27379 thuphan27379 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 21, 2024
@zannager zannager added the support: question Community support but can be turned into an improvement label Feb 21, 2024
@danilo-leal danilo-leal changed the title what different between Container, Stack and Box? how to use compare with div tag? which one will cover which one? [system] What's different between Container, Stack and Box? How to use compared with a div? Which one will cover which one? Feb 21, 2024
@danilo-leal danilo-leal added the package: system Specific to @mui/system label Feb 21, 2024
@samuelsycamore
Copy link
Member

samuelsycamore commented Feb 21, 2024 •
edited

Thanks for the feedback @thuphan27379 ! I completely agree that the docs are lacking when it comes to describing the use cases for these components. In fact, I'm currently in the process of revising the Box page (#40622) and the Container page (#41074), and I'll plan on revising Grid and Stack next!

To quickly answer your questions as best as I can:

  • Use Container for the top level wrapper of the app—in other words, it should sit close to the app's <body> tag, and like <body>, there should be only one
  • Use Grid inside your Container to arrange Boxes and Stacks into a layout
  • Use Stack as a wrapper to arrange content along the horizontal or vertical axis
  • Use Box for all other generic wrapping purposes—like a <div> that has access to your theme and other MUI-specific features
    • Because Box is a generic wrapper, you could also put a Grid or a Stack inside of one—but it would be strange to put a Container inside of a Box, because the Container is meant to be at the top of the DOM tree
  • You can put a <div> inside of any of these components, as needed—the main benefit of using layout components instead of plain HTML is that you get access to additional customization tools (props, theme tokens)

I hope that helps! Please feel free to ask more questions if you have any—it will help us to better revise these docs for everyone else.

@samuelsycamore samuelsycamore added docs Improvements or additions to the documentation support: docs-feedback Feedback from documentation page and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 21, 2024
@samuelsycamore samuelsycamore changed the title [system] What's different between Container, Stack and Box? How to use compared with a div? Which one will cover which one? [system] Improve documentation on usage of layout components: Container, Grid, Box, Stack Feb 21, 2024
@thuphan27379
Copy link
Author

thanks alot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@samuelsycamore samuelsycamore

Labels
docs Improvements or additions to the documentation package: system Specific to @mui/system support: docs-feedback Feedback from documentation page support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@danilo-leal @samuelsycamore @zannager @thuphan27379