CSS HTML JavaScript Shell
Clone or download
sergejmueller Merge pull request #21 from superReal/feature/fix-alignment-ie11
Feature/fix alignment ie11 and bump version to 1.0.1
Latest commit 439e456 Jul 12, 2018


sR Grid

Dead Simple Flexbox Grid

Dependency Status devDependencies Status Code Climate Build Status Known Vulnerabilities

sR Grid is a flexible and fully responsive grid system based on Flexbox. It follows the mobile first approach and the features are module-based. In the default setup each feature is disabled and can be enabled as required. In this way the generated code remains as small as possible.

The sR Grid uses data attributes. The markup remains clear and easy to understand.


$ yarn add @superreal/srbreakpoints @superreal/srgrid

If you prefer using npm:

$ npm install --save @superreal/srbreakpoints @superreal/srgrid

Note: the sR Grid module uses sR Breakpoints as a dependency.


  1. Import the sR Breakpoints & sR Grid modules
  2. Init sR Breakpoints module
  3. Create a sR Grid grid
@import 'path_to_node_modules_folder/@superreal/srbreakpoints/src/styles/srbreakpoints.scss';
@import 'path_to_node_modules_folder/@superreal/srgrid/src/styles/srgrid.scss';

@include srbreakpoints-init(
 // Your sR Breakpoints settings
@include srgrid-create-grid(
 // Your sR Grid settings

Browser compatibility


Chrome Firefox Safari Opera EDGE Internet Explorer
29 28 9 17 12 11


Chrome for Android iOS Safari Android Browser Samsung Internet
57 9.2 4.4 4


License (MIT)

Copyright (c) superReal GmbH