argyleink, 7 months ago

@5t3ph designercember used it for art direction https://designcember.com

managing overflow, like if there's too many items i make a dropdown out of those that can't fit

similar to above, a select can expand to a non-disclosed list if there's enough room (unhiding content)

swap content, like hide a description or swap to an alt headline

change an animation direction or type

i also strong agree it's been a lot of cards lol

Kilian, 8 months ago

@5t3ph Just saw this one which is pretty nice: https://twitter.com/Jonnotie/status/1711171157192532389

mrtrimble, 8 months ago

@5t3ph can't find the example (think it was from @Una's presentation at CSS Day) - but I liked the button that could switch from icon only, text only, or both using container queries

inkfishthecloudy, 8 months ago

@5t3ph I like how container queries allow you to design components liquidly to take the shape of the container they're in. Have the same content be a hero when in a hero sized container or a sidebar item when in that. The use is really broad!

alanbsmith, 8 months ago

@5t3ph they’re handy for overflow menus.

ardouglass, 8 months ago

@5t3ph @zachleat I did a calendar component in the fake CQ with JS days that would change formats (calendar view vs list view) based on how much room there was.

jamesarosen, 8 months ago

@5t3ph 1. Charts in the main section that resize when the viewport resizes OR the sidebar is collapsed
2. Breadcrumbs that elide when they can’t fit in a row

reedpiernock, 8 months ago

@5t3ph I'm working with our UX designer to update heading sizes per page templates -- the full-width landing page content area can have larger headings, which look TOO big on pages with sidebars. Containers queries are helping more than media queries combined with page template classes, those were getting buggy. I deleted SO MANY lines of code.

nhoizey, 8 months ago

@5t3ph on https://nicolas-hoizey.photo the first gallery thumbnail gets larger if there is enough space. No need anymore to know if there’s a sidebar or not, thanks to container queries.

kaiserkiwi, 8 months ago

@5t3ph I created a dashboard where the user could change column count and the can put the tiles anywhere they want. And change the size. Container queries helped a lot here.

css, 8 months ago

@5t3ph be able to use the "cqi" unit .. well, that's all.

Since cqi is, in most of the cases, the width it can be used to define height and maintain some ratio that cannot be defined using aspect-ratio.

Also the cqi unit can play the role of the vw unit without the scrollbar issue.

Zearin, 8 months ago

@css @5t3ph Can you give an example of an aspect ratio that cannot be defined using aspect-ratio?

css, 8 months ago

@Zearin @5t3ph

You may want to define the height of rows of your grid based on the width (without knowing what kind of elements it contains or their number)

For example, you can do the following:

grid-template-rows: 25cqi 50cqi

The first row will have a ratio of 4 and the second one 2.

You will maintain the ratio of the whole grid, not specific elements.

mattwilcox, 8 months ago

@5t3ph General layout. I use it in place of media queries now, because i abhor doing one thing in multiple ways. Container queries are the right tool for the job.

snugug, 8 months ago

@5t3ph I'm giving a talk about this in two weeks at the NY CSS Meetup! I'm using style container queries to toggle component state based on layout, and small/large main nav per language for i18n.

paulrosen, 8 months ago

@5t3ph Page layout: left nav sidebar, optional right sidebar, content taking remaining space. As the browser width gets narrower a breakpoint puts the right sidebar below the content. So the width of the content area isn't easily predictable from browser width. All the things in the content (which vary widely) are arranged based on the content size.

sturobson, 8 months ago

@5t3ph started looking at it for my new (it's taking ages Stu, c'mon) site header - because of the 'page' grid it feels like it makes more sense to change the layout of the header depending on the available width not the browser width.

I may get it finished soon (one day (hah! who knows)).