Style queries can be like dynamic modifier classes

Key Takeaways

where we have our grid auto column set to 40%, an overflow X of scroll, and our and I've just added a little bit of padding as well for the scroll bar and they look okay, but this one's kind of short and I don't really like that. Whereas, if I had a lot of elements, this does actually make more sense here. So, to be able to fix this, I can start by using a style query. And to do that, I'm going to do an at container and then write style here and wrap all of this inside of some parenthesis. And then what I'm going to do is I'm going to come here and I'm going to write scrolling is true. And so now we're looking if a parent has a custom property of scrolling is true. We're going to get scrolling. In this case, none of the parents do. So we're not getting it. And at this screen size, I only want this bottom one to get the scrolling. I don't want the top one to get it. So we can use another bit of modern CSS where I'm going to use a has selector. I'm going to say has the overflow grid as a direct child. So this will get any overflow grid that is a direct child of another element. And I don't want that. I only want it if that overflow grid has more than four children. So I can say nth child four. So this would be four or more children. And then what we can say is that the And then we can say is the scrolling in this situation is set to true. And then we can see this one in the bottom gets this horizontal scrolling, but the one at the top doesn't. But there's another problem is when we get to smaller screen sizes while the bottom one still works. Okay. We could probably add a gap in there and make this look a little bit better. But we're getting a little bit too squished on the one on the top here. So we could also add a media query and do something a little bit similar. So here I can say app media where our width is less than say 900 pixels and then we can say that if if something has the once again direct child that is an overflow grid it will once again turn on scrolling. So scrolling is now true and you can see that both of them get the horizontal scrolling but then when we get to larger screen sizes this one here turns off. And the reason I really like this is it's basically a modifier class that we're putting here, but we can conditionally apply it in different situations without any JavaScript or having to go in our HTML to add it. We can have it added conditionally based on these different scenarios that are coming up