Foundation CSS Grid Experiments
CSS Grid has been under development for years, but it's suddenly coming to life. Firefox 52 shipped with CSS Grid enabled, Chrome 57 supports it. We've been watching this closely and couldn't be more excited about the possibilities.
Explore By Doing
We believe that the best way to explore the possibilities is simply by playing with it, so here are 3 of our early experiments exploring the potential of CSS Grid.
Each of these components explores a different approach or dimension. Some of these will make their way into Foundation, and all of them can guide us towards a direction where every component can be morphed into others responsively.
Radically Responsive Components - Responsive Table/Cards
One huge improvement of CSS Grid over prior grid solutions is the ability to make dramatic layout changes without having to change markup. One place this shows up is in the display of data - when screens are large, tabular views are often useful for displaying large amounts of data. However, tables don't scale down very well, so on smaller screens data is more commonly displayed in a card-based layout. In this example we explore the potential for a table-style display on large screens that automatically shifts to a card-based layout on smaller screens
See the Pen Table/card combo experiment with CSS Grid by ZURB Foundation (@ZURBFoundation) on CodePen.
Radically Responsive Navigation
Another big area where layouts change dramatically on different screen sizes is in navigation. Often sites end up having to maintain multiple sets of markup for different screen sizes, or using lots of JavaScript to morph structure. This example explores a 'MegaMenu' prototype implemented with CSS Grid.
See the Pen Megamenu Prototype with CSS Grid by ZURB Foundation (@ZURBFoundation) on CodePen.
Layering Items
CSS-Grid also allows the controlled overlay of content, something that was much harder to done in prior display formats, so in this example we explore that possibility to create a beautiful content and image overlay that morphs into a card on smaller screen sizes.
See the Pen CSS Grid Example Layering items by ZURB Foundation (@ZURBFoundation) on CodePen.
Check out other Playground experiments
Foundation CSS Grid + Container Queries
Foundation Grids within Grids
Foundation for Apps
Tribute.js
