Improve explanation of MasterDetailLayout

The functionality of the MDL component is still a bit unclear to many users.
The documentation could help explain it by way of mental models:

• When the MDL is used as a parent router layout, think of the detail area as a separate view that would otherwise be normally navigated to (away from the master view)
• When the MDL is used without routing, think of it as a normal layout, like HL or VL, in which you add/remove the detail area to show/hide it.

Additionally, in the samples provided, the detail area should be visible by default. Users are currently confused when they just resize the splitter but don't see anything happening, because the detail area has not been opened by selecting an item in the Grid.

If you think this issue is important, add a 👍 reaction to help the community and maintainers prioritize this issue.

Start by locating the MasterDetailLayout documentation and the samples that demonstrate it. Update the explanation with the two requested mental models and make the detail area visible by default in the samples; done means users can understand both usage modes and see the effect of resizing without first selecting a Grid item.