« Back to Grid

Responsive Grid with Flexbox


Project Description

This is a fully responsive grid based on Flexbox elelment. I wanted to create a lightweight, framework-independent grid to be used as front-end layout for responsive websites and web applications. The Grid has an option of positioning 1 to 12 columns of content per row, various widths and layouts. When scaling a browser window, the grid responds by staking up columns vertically. With this grid, my goal is to provide uncompromizing user experience on any device.

Features

  1. Mobile First Layout
  2. Media queries support:
    • Desktop - over 769px
    • Tablet - 481 to 768px
    • Mobile - 480 pixes and less
  3. Grid Layouts
    • Basic 1 to 12 columns
    • Sidebar and Main content
    • Left / Center / Right -aligned columns
    • Nested columns
    • Top-, center-, and bottom- aligned content
  4. Reordering of columns at different media queries
  5. Sample webpage
    • Header, menu, sidebars and main content sections
    • Menu items respond differently for desktop, tablet and mobile
    • Sidebars stack below main

Technologies

Browser support

  • Chrome 31+
  • Firefox 31+
  • Safari and iOS Safari 7+
  • IE 10+
  • Android 4.4+

Device support

  • Desktop - 801px and higher
  • Tablet - between 481px and 800px
  • Mobile - 480px and lower