Flexbox Grid Sass

This work is an adaptation from the original Flexbox Grid created by @kristoferjoseph.

Grid based on the flexbox model.

• Learn about Flexbox
• Check the documentation

About

By trying the Flexbox Grid we saw the internal need to a SASS version of it. Thanks to the good work of Kristopher Joseph, we forked his project and sassified it.

This version is a fork of the hugeinc/flexboxgrid-sass project. It has been updated here to use the correct SCSS syntax for division and the now unnecessary browser prefixing has been removed. If you still need browser prefixes for your project, you can still use this library and just run your compiled CSS through PostCSS/autoprefixer to handle it in your build.

Install

# npm
npm add -D @rewdy/flexboxgrid-sass

# yarn
yarn add -D @rewdy/flexboxgrid-sass

# pnpm
pnpm add -D @rewdy/flexboxgrid-sass

# ...you get the idea...

Use

To modify your flexbox-based grid, declare the following variables on your layout .scss

Set the number of columns you want to use on your layout

$flexboxgrid-grid-columns: 12;

Set the gutter between columns

$flexboxgrid-gutter-width: 1rem;

Set a margin for the container sides

$flexboxgrid-outer-margin: 1rem;

Create or remove breakpoints for your project

You can modify, remove or create breakpoints before generate the final CSS.

$flexboxgrid-breakpoints:
  sm 48rem,
  md 64rem,
  lg 80rem,
  xlg 90rem,
  newbreakpoint 120rem;