wocss-objects-grid v4.0.2

This module is DEPRECATED

This module has been moved to the monorepo wocss (and renamed to @wocss/objects-grid)

GRID

Object

The wocss-objects-grid module contains the grid object, a powerful grid system based on Flexbox.

Install using npm:

$ npm install wocss-objects-grid --save

Note The grid object use negative margins, you will need a root element overflowing the grid object, or it might cause horizontal scroll.

Usage

With a tool like webpack you can import this module writing:

@import '~wocss-objects-grid';

Basic usage of the Grid object uses the required classes:

<div class="o-grid">
  <div class="o-grid__item"></div>
  <div class="o-grid__item"></div>
</div>

Note The grid object should be complemented with the wocss-utilities-widths module, for example:

<div class="o-grid">
  <div class="o-grid__item u-12/12 u-6/12@tablet"></div>
  <div class="o-grid__item u-12/12 u-6/12@tablet"></div>
</div>

Modifiers

.o-grid

• o-grid--stretch items with same height.
• o-grid--middle items with vertical centering.
• o-grid--gutter-[1|2|3|4|5|6] alter spacing between items, see wocss-spaces variable.
• o-grid--gutter-x-[1|2|3|4|5|6] alter spacing between items on x axis, see wocss-spaces variable.
• o-grid--gutter-y-[1|2|3|4|5|6] alter spacing between items on y axis, see wocss-spaces variable.

.o-grid__item

• o-grid__item--auto the width of this item is based on its content width.
• o-grid__item--fit this item will take up the remaining space available. (modifier applied by default)

For example:

<div class="o-grid o-grid--gutter-3">
  <div class="o-grid__item"></div>
  <div class="o-grid__item"></div>
  <div class="o-grid__item"></div>
</div>

Dependencies

• wocss-settings-spaces
• wocss-tools-bem-constructor
• wocss-tools-mq