grid-box

A grid system for SASS based on flexbox that allows you to quickly set the number of elements per row on a given node.

Features

• Create a horizontal grid by applying one simple mixin to the parent node
• Control child element width individually with the +span mixin
• Relative gutters

Getting Started

npm install -S grid-box or yarn add grid-box

Then just import it at the top of your stylesheet. @import ../../node_modules/grid-box/gridbox.sass

Usage

Example #1

<parent>
  <child>...</child>
  <child>...</child>
  <child>...</child>
</parent>

parent
	+gridbox

Example #2

<section class="parent">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</parent>

.parent
	+gridbox(center, 6, 3, 2)

Example #3

<section class="gridbox">
  <div class="child">...</div>
  <div class="child">...</div>
  <div class="child">...</div>
</parent>

.child
	+span(12)

Settings

| Variable | Default | Description | | --------------------- |:-----------------:| ------------------------------------------------------------: | | $container-max-width | 1180px | Container width | | $columns | 12 | Number of columns you wanna base the grid system on | | $gutter-width | 20px | Gutter width. Becomes relative when =< $bp-xl | | $bp-xxs | 320px | small phone portrait | | $bp-xs | 480px | phone portrait | | $bp-sm | 600px | phablets | | $bp-md | 768px | tablet portrait | | $bp-lg | 959px | tablet landscape | | $bp-xl | 1180px (Container width) | desktop | | $bp-full | 1440px | |

Gotchas & limitations

The default +gridbox mixin (i.e. w/ gutters option) will not work on an element that has a set width. Otherwise (with no-gutters argument), it will work on any element e.g. +gridbox(left, 4, 4, 2, no-gutters).

Grid-Box might be disruptive if used in conjunction with other grid libraries (i.e. some keywords tend to be the same as others). I recommend sticking to only one of them.

Browser Support

This package uses Flexbox. So expect poor support on IE9 and older as well as older Android devices.