Foundation CSS Grid Experiments

Exploring component-level grids using container queries

One of the inherent challenges with developing advanced layouts today is that media queries allow you to customise based on screen size, but force you to always have global knowledge. If you have different state-based layouts, you need to rethink your css and layouts for each and every one.

No wonder then, that the new CSS-grid spec has been primarily discussed as a "page layout" engine. It gives you fine-grained control of layout across two dimensions, but with that fine-grained control you need to think about the space available to your grid so you can lay things out appropriately at every size. Thinking about that level of precision for sub-components in every state of your page would quickly grow overwhelming.

Imagine the potential

Despite the complexity, imagine the potential of having the power of CSS-grid applied to every one of your components. Instead of thinking of grids as a structural choice as frameworks have historically done, or even at the page-layout level as many CSS-grid advocates have to date, what if we start treating grids as components that can be swapped in and out, combined, and nested? The only major roadblock is the multiplying complexity of having to write CSS for each new layout in which we want to insert a grid.

Enter Container Queries

This is where we believe there is TREMENDOUS potential in the new proposed spec of 'container queries'. In case you aren't familiar, a container query takes the concept of a media query and applies to a container, letting you write CSS scoped to the size available to a component. This allows us to isolate our logic around display to a component in particular, and no longer have to keep track of every possible state.

Container queries are still very much under development, they are a long way from making it into the browser, but we believe they have such tremendous potential we're considering integrating them as a first class citizen within Foundation.

To explore and illustrate this idea, we used Martin Auswöger's container query polyfill: https://au.si/css-container-element-queries to take a responsive CSS grid layout example and show what it could look like when placed in an expandable side bar layout. Without container queries, this would require creating a duplicate set of stylings based on expanded and unexpanded states throughout, but with container queries this allows us to simply shift the responsive logic from media queries on the page to container queries for the component. Check it out:

See the Pen Table/cards Combine Grid and container queries by ZURB Foundation (@ZURBFoundation) on CodePen.