[Feature Request] Grid System Enhancement with Container Queries and Media Query Fallback

[tlserver]

Problem to solve

The Vuetify grid system, which currently uses "CSS media queries," is adept at creating responsive layouts by responding to changes in the viewport size. This conventional approach works well for general responsiveness across various devices. However, it encounters limitations in more dynamic web application layouts where the viewport is not the sole determinant of the layout's container size.

Web applications frequently feature a vertical navigation menu on the left side of the screen. This menu often includes a collapsibility feature to maximize the usable space of the main content area. When this menu is toggled, it significantly alters the width of the main content container without affecting the viewport size. The current grid system doesn't respond to these changes, leading to a suboptimal use of space and potentially a compromised user experience.

Furthermore, contemporary web applications sometimes require a more complex layout, such as a split-screen interface where the screen is divided into resizable panels or "windows." Users may wish to interact with these panels by adjusting their respective sizes to suit their workflow needs. With a grid system entirely reliant on viewport breakpoints, it cannot adapt to the resizing of these panels, as they are independent of the overall viewport dimensions.

In essence, while the Vuetify grid system excels in adapting to different device screens, it falls short in scenarios where the layout must respond to changes within the viewport itself. The lack of responsiveness to container size changes, not just viewport changes, can hinder the creation of highly interactive and adaptable web applications that modern users expect.

Proposed solution

CSS has introduced container queries, which allow styling based on the size of the nearest container element, such as a <div>. This capability means that a grid system can now reference any DOM node and adjust its layout according to various breakpoints. As a result, grid systems have become significantly more versatile.

The majority of modern browsers have adopted this feature. As reported by caniuse, over 90% of users were utilizing browsers that supported container queries as of January 2024. To accommodate the remaining 10% of users, Adrian Bece proposed a fallback strategy.

For backwards compatibility, grid systems can employ media queries as the default strategy while offering the option to switch to container queries. This can be done by setting a boolean flag in the configuration. This dual-strategy approach ensures that layouts remain functional and responsive across all browsers, providing a seamless experience while leveraging the benefits of container queries where available.

[KaelWD]

If we continue with our current browser support policy this won't be possible until feb 2025.

[tlserver]

Oh I see. Then, is it possible to place it in lab until Feb 2025?

[websitevirtuoso]

If you want to have modern classes, grid, etc. you can add some other css framework. Ex: I prefer to use tailwind for better flexibility.