Expanding upon our previous explorations of CSS-Grid and Container Queries, we look at the concept of nesting responsive css-grid based components within other css-grid based layouts and components.

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.

See the Pen Grids within Grids by ZURB Foundation (@ZURBFoundation) on CodePen.

Startup playground

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in