Foundation CSS Grid Experiments

Grid-based components

Starting from a concept that CSS-grid enables incredible new possibilities for web components, and adding on the concept of container queries to allow us to think about components individually relative to the space they have available to them, rather than only at a page-level, in this piece we explore what happens when multiple grid-based components interact.

Nesting Grids

The core concept here is to start with a CSS-grid based layout, and then ahve a responsive CSS-grid based component that can fit within different pieces within that layout. To demonstrate this concept, we show the layout sections using borders, and allow dragging the component from section to section. We're using a responsive table/cards component as demonstrated previously here and here.

Foundation’s grid has always been flexible, but with CSS Grid hitting browsers the potential to mix, match, and combine grids is quickly becoming a reality. This example highlights one potential outcome.