GridtoFlex

Flexbox fallbacks for popular UI solutions that use CSS Grid.

CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won't really work as you expect (more info here). This site is a solution for you so you can start to progressively enhance without fear!

Things to Note: CSS grid allows for specified styling using the vertical area as well as horizontal. Flexbox doesn't allow for this, so we'll be using fixed heights in these examples.

Feel free to play around with the CSS! To swap between implementations, use the toggles.

Page Layouts

Embedded Sidebar

Header
Sidebar
Content
Footer
Explore on CodePen

Full Sidebar

Header
Content
Footer
Explore on CodePen

Block Grids

Endless/Auto Block Grid (Static)

1
2
3
4
5
6
Explore on CodePen

Component Layouts

Navigation with Profile

  • Nav1
  • Nav2
  • Nav3
  • Nav4

Log Out

💁🏻‍♀️
Explore on CodePen