Multi-column Layout

[bcorcoran]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/application-shells/multi-column
• Component name: Full-width three column

Describe the bug
Additional column is only visible on xl viewport.

Expected behavior
I was not expecting the additional column to be completely hidden on anything below XL viewport. Why is it this way? From a usability perspective, it makes no sense... what if there's important content there? I was kind of expecting it to behave like a second sidebar so that you could expand it on smaller viewports. Even stacked would be OK. Not sure what the ultimate solution is but right now it feels incomplete.

[EdorianDark]

It was very confusing to open it and see only one column.
The icon is also misleading.

[xt0rted]

This layout mimics the GitHub dashboard, but I agree I didn't realize there was a 3rd column until I came back to the site later and my browser was wider.

[davidluhr]

After talking with the team about this pattern, this is working as intended. It seems counter-intuitive at first, but this is how several major sites handle responsive content with a secondary column.

As mentioned, this matches GitHub, as well as Twitter, Reddit, and others. This layout is used in the new Detail Screens examples: https://tailwindui.com/components/application-ui/page-examples/detail-screens

In these examples, the secondary content is either not shown on smaller screens, or presented as part of the main content for smaller breakpoints. I will make note that it may be useful to have multi-column layouts that retain a secondary column in some fashion across viewport sizes.

[artworkad]

@davidluhr I understand that one can hide secondary content for smaller breakpoints. But when the column is part of a tiered navigation, there has to be a responsive version for that navigation. Right now there is none as you can see from the pictures:

Is there a pattern for this?