The layout object is the basic grid system. It is used alongside with trumps.widths and trumps.widths-responsive.
As Inuit.css grids are positioned using display: inline-block;, you must strip whitespace from between .layout__item elements to get the grids to properly line up.
Or use one of these solutions:
https://css-tricks.com/fighting-the-space-between-inline-block-elements
I personally use this solution:
layout {
letter-spacing: -.325rem;
// -------
// Element
// -------
&__item {
letter-spacing: normal;
}
<div class="layout">
<div class="layout__item u-1/3">
Foo
</div>
<div class="layout__item u-1/3">
Bar
</div>
<div class="layout__item u-1/3">
Baz
</div>
</div>
.layout
1/3
1/3
1/3
<div class="layout">
<div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div>
</div>
.layout--tiny
1/3
1/3
1/3
<div class=" layout layout--tiny ">
<div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div>
</div>
.layout--small
1/3
1/3
1/3
<div class=" layout layout--small ">
<div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div>
</div>
.layout--large
1/3
1/3
1/3
<div class=" layout layout--large ">
<div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div>
</div>
.layout--huge
1/3
1/3
1/3
<div class=" layout layout--huge ">
<div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div>
</div>
.layout--flush
1/3
1/3
1/3
<div class=" layout layout--flush ">
<div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>1/3</p>
</div>
</div>
.layout--rev
1
2
3
<div class=" layout layout--rev ">
<div class=" layout__item u-1/3 ">
<p>1</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>2</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>3</p>
</div>
</div>
.layout--middle
Foo
Bar
Baz
Bar
Baz
<div class=" layout layout--middle ">
<div class=" layout__item u-1/3 ">
<p>Foo <br> Bar <br> Baz</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>Bar</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>Baz</p>
</div>
</div>
.layout--bottom
Foo
Bar
Baz
Bar
Baz
<div class=" layout layout--bottom ">
<div class=" layout__item u-1/3 ">
<p>Foo <br> Bar <br> Baz</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>Bar</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>Baz</p>
</div>
</div>
.layout--right
Foo
Bar
<div class=" layout layout--right ">
<div class=" layout__item u-1/3 ">
<p>Foo</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>Bar</p>
</div>
</div>
.layout--center
Foo
Bar
<div class=" layout layout--center ">
<div class=" layout__item u-1/3 ">
<p>Foo</p>
</div><!--
--><div class=" layout__item u-1/3 ">
<p>Bar</p>
</div>
</div>
.layout--auto
Foo
Bar
Baz
<div class=" layout layout--auto ">
<div class=" layout__item ">
<p>Foo</p>
</div><!--
--><div class=" layout__item ">
<p>Bar</p>
</div><!--
--><div class=" layout__item ">
<p>Baz</p>
</div>
</div>
The layout object provides the following modifiers:
.layout--tiny
.layout--small
.layout--large
.layout--huge
.layout--flush
.layout--rev
.layout--middle
.layout--bottom
.layout--right
.layout--center
.layout--auto
.layout--tiny, .layout--small, .layout--large, .layout--huge all vary the spacing between the layout-items. Each one has its own dedicated variable to control that spacing:
$inuit-layout-gutter--tiny: quarter($inuit-layout-gutter) !default;
$inuit-layout-gutter--small: halve($inuit-layout-gutter) !default;
$inuit-layout-gutter--large: double($inuit-layout-gutter) !default;
$inuit-layout-gutter--huge: quadruple($inuit-layout-gutter) !default;
.layout--flush will eliminate the spacing completely.
.layout--rev reverses the order of the layout-items.
.layout--middle aligns the layout-items vertically.
.layout--bottom aligns the layout-items on the bottom.
.layout--right makes the layout-items fill up the .layout container from the right.
This just makes sense if a .layout row is not full-width, e.g.:
<div class="layout layout--right">
<div class="layout__item u-1/3">
Foo
</div>
<div class="layout__item u-1/3">
Bar
</div>
</div>
.layout--center makes the layout-items fill up the .layout container from the center outward.
This also just makes sense if a .layout row is not full-width as above. (Check demo for clarification).
.layout--auto causes the layout-items to take up a non-explicit amount of width. It is critical
not to assign a width-class here!
<div class="layout layout--auto">
<div class="layout__item">
Foo
</div>
<div class="layout__item">
Bar
</div>
<div class="layout__item">
Baz
</div>
</div>
// Predefine the variables below in order to alter and enable specific features.
$inuit-layout-namespace: $inuit-namespace !default;
$inuit-layout-gutter: $inuit-base-spacing-unit !default;
$inuit-layout-gutter--tiny: quarter($inuit-layout-gutter) !default;
$inuit-layout-gutter--small: halve($inuit-layout-gutter) !default;
$inuit-layout-gutter--large: double($inuit-layout-gutter) !default;
$inuit-layout-gutter--huge: quadruple($inuit-layout-gutter) !default;
$inuit-enable-layout--tiny: false !default;
$inuit-enable-layout--small: false !default;
$inuit-enable-layout--large: false !default;
$inuit-enable-layout--huge: false !default;
$inuit-enable-layout--flush: false !default;
$inuit-enable-layout--rev: false !default;
$inuit-enable-layout--middle: false !default;
$inuit-enable-layout--bottom: false !default;
$inuit-enable-layout--right: false !default;
$inuit-enable-layout--center: false !default;
$inuit-enable-layout--auto: false !default;
// Here we set a variable assuming that `box-sizing: border-box;` is not set
// globally. If it has been previously been defined, the following variable will
// be overriden and will be set to `true`.
$inuit-global-border-box: false !default;