iotaCSS is now a monorepo and all individual repositories are part of it. Please open issues or PRs here: https://github.com/iotacss/iotacss.

Grid Object

The grid object is responsible for building a smart grid when used with Size, Push or Pull utilities.

Installation

npm install --save iotacss-objs-grid

Options

$iota-objs-grid-namespace          : 'grid' !default;
$iota-objs-grid-column-name        : 'col' !default;
$iota-objs-grid-align-right-name   : 'right' !default;
$iota-objs-grid-align-center-name  : 'center' !default;
$iota-objs-grid-align-top-name     : 'top' !default;
$iota-objs-grid-align-middle-name  : 'middle' !default;
$iota-objs-grid-align-bottom-name  : 'bottom' !default;
$iota-objs-grid-align-around-name  : 'around' !default;
$iota-objs-grid-align-between-name : 'between' !default;
$iota-objs-grid-reverse-name       : 'rev' !default;
$iota-objs-grid-equal-height-name  : 'equal-height' !default;

$iota-objs-grid-gutter-default     : $iota-global-gutter-default !default;
$iota-objs-grid-gutter-extra       : () !default;

$iota-objs-grid-aligned            : false !default;

$iota-objs-grid-rev                : false !default;

$iota-objs-grid-flex               : $iota-global-flex !default;
$iota-objs-grid-equal-height       : false !default;

Example

<div class="o-grid">

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

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

</div>

Do you see this empty HTML comment ''? This is used to fight the space between the grid columns, because they are inline block elements. If you want to read more about this fix or find some alternatives, head over here.