@wocss/objects-grid

4.0.4 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @wocss/objects-grid

Weekly Downloads

0

Version

4.0.4

License

MIT

Unpacked Size

6.35 kB

Total Files

4

Last publish

Collaborators

  • wochap