rhx-grid: Default media query or container

[zeroedin]

I think @adamjohnson and I agree that we like the idea of @container queries being the default and having to explicitly set query="media" on a grid if they want to use a @media query based container.

<rhx-grid query="media">
  ...grid items
</rhx-grid>

But would this be a good thing due to history and the technical debt of the past? Developers are currently used to @media and @container is the new hotness. Are we being too future-forward? I hope I am wrong here and it isn't a big deal to go container first. Thoughts?

As devil's advocate, the negative side of the container default is that the container needs to exist for the container query-based grids to function. In a default scenario, if the grid is dropped on a page with no container, the queries would not take place resulting in stacked items. Or if a parent container exists but is itself a grid and the area in which the rhx-grid is added may not result in the expectations of the implementation. crude example: https://codepen.io/zeroedin/pen/wvLJWyx

[adamjohnson]

Name the rhx-grid container?

Or if a parent container exists but is itself a grid and the area in which the rhx-grid is added may not result in the expectations of the implementation.

I wonder if we should explicitly set container-name: rhx-grid;? If we're already going to require users to add container-type: inline-size;, including container-name in that copy-pasta block seems like no big deal.

Usage Instructions

1. Copy and paste the following two lines of CSS onto your component's container:

/* Rename👇 as appropriate */
.my-components-wrapper {
  container-type: inline-size;
  container-name: rhx-grid;
}

2. Install and use the <rhx-grid> component...

Doing this would set clear expectations. If you don't set container-name: rhx-grid; it will NOT work. That feels right to me.

It also avoids potential confusion if users are already using unnamed container queries. Having an explicit @container name avoids collisions.

Should it default to @container or @media queries?

In writing this out, there are certainly a lot of ways a user could stumble when implementing @container if it's the default.

It is not It Just Works™️ which is how I prefer my tools to work.

Because of this, I am now leaning more towards having rhx-grid default to @media queries (and It Just Works™️).

@container queries could be opt-in—and require only slightly more effort to get up and running.