Simple responsive css grid based on flexbox.

Installation

Via duo:

@import 'structs/grid'

Via npm:

npm install structs-grid

You need to make sure you use one of the following preprocessors in your duo build process to provide support for css variables and custom media queries:

• basswork
• suitcss
• myth

Usage

Extensive documentation will be coming soon. For now look at the existing tests or at the source.

Customization

After you imported the grid you can customize the variables by using the :root selector:

:root {
  --property: value;
}

gutter-y, gutter-x

• Defaults to 1em

Defines the spacing between the given grid cells.

flex-1of-{2..6}

Defines the grid scale. This should be generally not be modified

container-width

• Defaults to 64em

Defines the max-width for the utility class u-contain.

License

MIT