Grid Object

The grid object is responsible for building a smart, flexible and responsive grid.
You should use it together with Size, Push and Pull utilities.

Installation

npm install --save-dev iotacss-objs-grid

Dependencies

Settings.Core
Tools.Core

Optional Dependencies

Utilities.Size
Utilities.Pull
Utilities.Push

Settings

Grid object is responsible for generating the basic HTML classes for your grid. By default it uses display: inline-block for columns and can use flexbox instead if configured so. It has multiple alignment options. Width and offset of each grid column is set through size, pull and push utilities.

Name	Type	Default	Description
$iota-objs-grid-aligned	Boolean	false	Enable / Disable aligment modifiers. `.o-grid--right` : Align columns on right horizontally `.o-grid--center` : Align columns on center horizontally `.o-grid--middle` : Align columns on middle vertically `.o-grid--bottom` : Align columns on bottom vertically
$iota-objs-grid-rev	Boolean	false	Enable / Disable reversed modifier `.o-grid--rev : Reverse columns order`
$iota-objs-grid-gutter-default	Number / Map	$iota-global-gutter-default	Default gutter size
$iota-objs-grid-gutter-extra	Map / Nested Map	()	Extra gutters map. Each gutter size will be available as a modifier that will be named according to the gutter name. Each gutter size will be available as a modifier that will be named according to the gutter name. E.g. If `$iota-objs-grid-gutter-extra: ('compact': '10px');` then `.o-grid--compact` will be available for use.
$iota-objs-grid-flex	Boolean	$iota-global-flex	Enable / Disable flexbox on grid.
$iota-objs-grid-equal-height	Boolean	false	Enable / Disable equal height modifier `.o-grid--equal-height`. Works only if `$iota-obj-grid-flex` is enabled.
Settings for Naming of grid HTML classes
$iota-objs-grid-namespace	String	grid	grid class namespace
$iota-objs-grid-column-name	String	col	grid column class namespace
$iota-objs-grid-align-right-name	String	right	right align modifier class namespace
$iota-objs-grid-align-center-name	String	center	center align modifier class namespace
$iota-objs-grid-align-top-name	String	top	top align modifier class namespace
$iota-objs-grid-namespace	String	grid	grid class namespace

Example

Simple HTML Markup

1
2
3
4
5
6
7
8
9
10
11 <div class="o-grid">

  <div class="o-grid__col u-3/12 u-pull-1/12">
    Column
  </div><!--

--><div class="o-grid__col u-8/12">
    Column
  </div>

</div>

Warning

In this example $iota-objs-grid-flex is disabled and grid uses the default display: inline-block for o-grid__col elements, so you need to add an HTML comment between columns markup to remove inline-block elements whitespace. You can learn more about this here.

If you enable $iota-objs-grid-flex then there is no need to add HTML comment between columns.

Grid aligned middle

1
2
3 $iota-objs-grid-aligned: true;

@import 'node_modules/iotacss-objs-grid/objects.grid';

1
2
3
4
5
6
7
8
9
10
11 <div class="o-grid o-grid--middle">

  <div class="o-grid__col u-1/3">
    Column
  </div><!--

--><div class="o-grid__col u-2/3">
    Column
  </div>

</div>

Responsive grid

It creates a Grid that has 2 columns in mobile, 3 in tablet and 4 in desktop.

1
2
3
4 $iota-utils-size-res: true;
$iota-utils-size-cols: 2, 3, 4;

@import 'node_modules/iotacss-objs-grid/objects.grid';

1
2
3
4
5
6
7
8
9
10
11 <div class="o-grid">

  <div class="o-grid__col u-1/2 u-1/3@sm u-1/4@md">
    Column
  </div><!--

--><div class="o-grid__col u-1/2 u-1/3@sm u-1/4@md">
    Column
  </div>

</div>

Responsive grid gutter

It creates a Grid that has 10px gutter in mobile and 20px gutter in tablets and up.

1
2
3
4
5
6 $iota-objs-grid-gutter: (
  null : 10px,
  sm   : 20px
);

@import 'node_modules/iotacss-objs-grid/objects.grid';

Grid with extra responsive gutters

It creates an extra grid size modifier named ‘small’ that will have a 5px gutter size in mobile and 10px gutter size in tablets and up.

1
2
3
4
5
6
7
8 $iota-objs-grid-gutter: (
  small: (
    null : 5px,
    sm   : 10px
  )
);

@import 'node_modules/iotacss-objs-grid/objects.grid';