Skip to content
Modern 12 column grid system based on flex property
CSS JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 36 commits ahead, 2 commits behind kristoferjoseph:master.

README.md

flexboxgrid2

npm version

Modern 12 column grid system based on flex property.

Documentation

Motivation

Forked from kristoferjoseph/flexboxgrid because original project seems abandoned (kristoferjoseph/flexboxgrid#236, kristoferjoseph/flexboxgrid#229, kristoferjoseph/flexboxgrid#211, etc).

Breakpoints

  • xs: 0..575px
  • sm: 576..767px
  • md: 768..991px
  • lg: 992..1199px
  • xl: 1200px+
  • .container padding: 8px
  • .container width: $breakpoint - 16px
  • .col-* padding: 8px

Install

yarn

yarn add flexboxgrid2

npm

npm i -S flexboxgrid2

Usage

webpack

import 'flexboxgrid2'
// or if you use airbnb-config-eslint which explicitly wants .css extension
import 'flexboxgrid2/flexboxgrid2.css'

unpkg.com CDN

<link rel="stylesheet" href="https://unpkg.com/flexboxgrid2@[version]/flexboxgrid2.css">

Replace [version] with current version, f.e. 7.2.1

You can’t perform that action at this time.