@container queries instead of @media for col grid #39128
Unanswered
jonaslingren
asked this question in
Ideas
Replies: 1 comment
-
IDK how exactly but we will work on the grid system to support CSS container queries probably for the v6 (see #37807). For that, we will probably also need to upgrade our I agree that it can be really useful for components that need to have a different rendering based on the parent container width and not compared to the width of the window. I'm thinking for example about a collapsable sidebar + content on the right which can contain contextually responsive breadcrumbs, paginations, etc. (which seems to be close to the use case of your post). |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Having a bit of issues developing sidebars with responsive content, where the content needs to break according to the width of the container rather than the width of the viewport.
Could it be an idea (and possible) to define a new class for .container or .container-fluid like .container-content and .container-fluid-content, or add a modifier class like .container-responsive, where all cols and responsive classes are switched to using the @container query instead of the @media?
Perhabs you could set the breakpoints for sm, md, lg, xl on the .container-content/.container-responsive container.
@container(min-width: 300px;) {
}
It would make it possible to make pull-out drawers where you can make to content responsive and change the width of the drawer while still having responsive content, that does not look at the viewport with to be responsive.
Any thoughts on this?
Beta Was this translation helpful? Give feedback.
All reactions