A responsive sass grid library built with flexbox


11642.0.74 years ago4 years agoMinified + gzip package size for @drewbot/sass-flexbox-grid in KB


Sass Flexbox Grid

Documentation and examples available at sassflexboxgrid.com


A responsive grid system based on Flexbox Grid and the flex property, re-written in Sass, edited and expanded upon.

Enhancements include:

  • Visibility classes
  • Additional 'XL' breakpoint
  • Sass variables and mixins
  • Customizable grid



npm install @drewbot/sass-flexbox-grid --save

Then link to your preferred CSS or Sass File:



CSS (minified)


Or copy the Sass files over to your src directory from the following directory:


Direct download


Mobile First

Use Sass Flexbox Grid's mobile-first media queries provided in the Sass version of the library. All styles should first be declared at small (mobile) then built outward for larger screens.

Version 2.0.3 Release Notes - 04/12/2018

  • Added !default; to adjustable grid vars in .../scss/variables/_grid-variables.scss.

Version 2.0.2 Release Notes - 04/10/2018

  • Added box-sizing: border-box; to all rows and columns by default.

Version 2.0.0 Release Notes - 04/09/2018

  • All columns within a row will automatically scale in height to match the tallest column in the row.
    • eq-height is thereby deprecated.
  • .auto-height class has been refactored to .natural-height.
    • Likewise, the row-auto-height() mixin has been refactored to row-natural-height().
  • The flex-column() mixin has been refactored to row-flex-column().
  • The .show class can now be applied to .row elements.
  • The show() mixin now accepts an optional $row argument and can be used on row elements.
    • Example: @include show("xs", "row") or @include show("xs", "true").

Version 1.0.0 Release Notes - 04/08/2018

  • Added gutters to the top, bottom, left, and right of all columns by default.
  • Gutter size can be adjusted by changing the value of the sass variable $gutter.
  • The .col-gutter-lr class will only apply gutters to the left and right of a column.
  • The .col-no-gutter class will remove gutters from a column.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.