Container Grids

There’s been a rumbling of people that want Container Queries—myself included. (Come see my talk this year... it’s all about container queries!)

The idea behind container (née element) queries is that you specify that under certain conditions—most commonly, the width of a particular container—apply different CSS.

The problem with container queries is that it opens up the window for circular references. You could theoretically have CSS that says the following: if the width of the container is under 500px then make the contents 600px. At which point, your container is no longer under 500px and the CSS is no longer applied. At which point, the contents are no longer 600px and the width of the container is now back under 500px and the CSS should be applied. That’s bad.

In my exploration of CSS grids, I’ve been building a mental model of how they work. Let’s start with the following example:

.grid {
    display: grid;
    grid-template-columns: 200px 500px;
}

Guess what happens when the container doesn’t have enough room for the two columns? It just overflows the container. There’s no reflow and the container remains the same size.

Container Grids?

One purpose for container queries is to specify different layouts. Maybe adjust the size of something or rearrange something.

My “what if” lightbulb wondered if there were a way that we could one day solve the container query circular reference problem by using a grid layout system exclusively with container queries. (Other layout systems could still be used. They just couldn’t be used in conjunction with container queries.)

Since this system would be specific to grid, I’m imagining a syntax similar to responsive images that allows you to specify the minimum width for which the grid would apply.

.grid {
    display: grid;
    grid-template-columns: 
        200px 300px 600w, 
        200px 200px 1fr 900w;
}

Container Other?

This doesn’t solve the problem of how to apply other design changes like font and colour changes or margin and padding changes that would also be applicable under those conditions.

I don’t have an eloquent solution for that. It’d need to be something that can deal with the cascade.

Now, I’m just spitballing here and don’t know enough about how the CSS specification works to know whether this could even work but what if you could name those grid templates?

.grid {
    display: grid;
    grid-template-columns: 
        200px 300px 600w tablet, 
        200px 200px 1fr 900w desktop;
}

From there, being able to style elements using those keywords.

.item:grid(tablet) {
    padding: 20px;
}

.item:grid(desktop) {
    padding: 40px;
}

Due to inheritance, the keywords would be applicable to child elements. If you have a grid inside a grid then the same inheritance rules apply, with the child element outranking the parent element.

You could have the same cascade rules, too.

Where to go from here?

I suspect there are many holes in this idea. But maybe it’s enough to spur someone somewhere along the way to make container queries a reality.