@moodxd/component-grid v1.0.3

MoO Grid

• 12-column responsive, mobile-first
• Use Grid to create horizontal groups of Grid-cells.
• Content should be placed within Grid-cells, and only Grid-cells may be immediate children of Grid.
• Grid-cells create gutters via padding. That padding is offset in Grid for the first and last Grid-cell via negative margin on Grid.
  • Override gutters with Grid--withoutGutter.
  • If the Grid is intended to stretch 100% of the window's width, set horizontal margin to 0 (.u-mH0).
• Grid-cell width can be set via Size Utilities
• Grid-cells will wrap if their combined width is greater than 100%;

Standard

By default, the standard gutter Grid-cell class has left and right padding of 16px/1.6rem

<div class="Grid">
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter u-fontWeight400">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2"><div class="u-bgYellowLighter">CELL</div></div>
</div>

Without Gutter

Use Grid--withoutGutter to set the grid margin to 0. The left and right padding of all child Grid-cell elements will also be set to 0

<div class="Grid Grid--withoutGutter">
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter u-fontWeight400">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
  <div class="Grid-cell u-size1of2 u-lg-size1of6"><div class="u-bgYellowLighter">CELL</div></div>
</div>

Nested (Flush)

In order for the nested elements to be flush with the parent Grid-cell, add the Grid element, which contains a negative left and right margin

<div class="Grid">
  <div class="Grid-cell u-sizeFull">
    <div class="Grid u-bgYellowLighter">
      <div class="Grid-cell u-md-size1of2">
        <div class="u-bgRedLighter">CELL</div>
      </div>
      <div class="Grid-cell u-md-size1of2">
        <div class="u-bgRedLighter">CELL</div>
      </div>
    </div>
  </div>
</div>

Nested (Not Flush)

Not adding the Grid-cell element will ensure the nested Grid-cell adheres to the padding of the parent Grid-cell

<div class="Grid">
  <div class="Grid-cell u-sizeFull">
    <div class="Grid-cell u-md-size1of2">
      <div class="u-bgRedLighter">CELL</div>
    </div>
    <div class="Grid-cell u-md-size1of2">
      <div class="u-bgRedLighter">CELL</div>
    </div>
  </div>
</div>

Centered Cell

<div class="Grid">
  <div class="Grid-cell Grid-cell--center u-size1of2">
    <div class="u-bgYellowLighter u-fontWeight400">CENTERED CELL</div>
  </div>
</div>

Center Align Cells

Center Aligned – Use Grid-cell--Centered to center a single Grid-cell. Use Grid--alignCenter to center multiple Grid-cells. Note: This also will change the text alignment of the content in the grid to center align

<div class="Grid Grid--alignCenter">
  <div class="Grid-cell u-size1of3">
    <div class="u-bgYellowLighter u-fontWeight400">CELL</div>
  </div>
  <div class="Grid-cell u-size1of3">
    <div class="u-bgYellowLighter u-fontWeight400">CELL</div>
  </div>
</div>

Right Aligned Cells

Use Grid--alignRight to change the order of Grid-cells and set the text alignment to text-align: right

<div class="Grid Grid--alignRight">
  <div class="Grid-cell u-size1of3">
    <div class="u-bgYellowLighter u-fontWeight400">CELL</div>
  </div>
  <div class="Grid-cell u-size1of3">
    <div class="u-bgYellowLighter u-fontWeight400">CELL</div>
  </div>
</div>