Container

The .container CSS class creates the foundation for the grid rows and columns that are placed within it.

Row

The .row CSS class is used within the container to arrange group items horizontally. Rows are built to grow and shrink with the screen size.

Column

Individual items are given the .column CSS class. Space on the row will be split event between the columns. Columnns will wrap onto the next row rather than shrinking past a certain point.

<div class="container">
  <div class="row">
    <div class="column">
      <p>Single item on a row.</p>
    </div>
  </div>
  <div class="row">
    <div class="column">
      <p>First row item.</p>
    </div>
    <div class="column">
      <p>Second row item.</p>
    </div>
  </div>
</div>

Grids can be nested by placing a .row element inside of a .column element. The nested grid does not require its own .container element.

<div class="container">
  <div class="row">
    <div class="column">
      <p>Column in parent.</p>
    </div>
    <div class="column">
      <div class="row">
        <div class="column">
          <p>Column in child.</p>
        </div>
        <div class="column">
          <p>Column in child.</p>
        </div>
      </div>
    </div>
  </div>
</div>

A limit can be applied to the number of items that are placed on a row by using the .row-# classes, for example .row-3 to limit the number of items is 3 items. Numbers which are factors of 12 will look the best (assuming the default configuration is used).

<div class="row row-3">
  <div class="column">
    <p>1st item on the row.</p>
  </div>
  <div class="column">
    <p>2nd item on the row.</p>
  </div>
  <div class="column">
    <p>3rd item on the row.</p>
  </div>
  <div class="column">
    <p>4th item will wrap to the next line.</p>
  </div>
</div>

Offset

A preceeding gap can be placed in front of a column using the .column-offset-# classes, for example .column-offset-3 to offset the column by the width of 3 of the 12 available columns.

Width

A limit can be put on the width of a column using the .column-wide-# classes, for example .column-wide-3 to limit the column to the width of 3 of the 12 available columns.

<div class="row">
  <div class="column column-wide-4">
    <p>0x offset, 4x width.</p>
  </div>
  <div class="column column-offset-2 column-wide-6">
    <p>2x offset, 6x width.</p>
  </div>
</div>

Row Configuration

5 options are provided for the configuration of how a .row element handles the vertical alignment of the items within it:

• .row-top - Items are aligned to the top of the row.
• .row-bottom - Items are aligned to the bottom of the row.
• .row-center - Items are vertically centered on the row.
• .row-stretch - Items are stretched to fill the row.
• .row-baseline - The baseline of each item's text will be the same for all items.

Column Configuration

Configuration for individual .column elements is available that can be applied in cases where fine-tuned control of vertical positioning is required:

• .column-top - Element is aligned to the top of the row.
• .column-bottom - Element is aligned to the bottom of the row.
• .column-center - Element is vertically centered on the row.
• .column-stretch - Element is stretched to fill the row.
• .column-baseline - The baseline of the text in the element will be aligned to other element's text baseline.

<div class="row row-bottom">
  <div class="column">
    <p>Column with very long content that takes up lots of vertical space. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis molestie libero, vel tincidunt diam tristique a.</p>
  </div>
  <div class="column">
    <p>Short column will be on the bottom of the row.</p>
  </div>
  <div class="column column-center">
    <p>Short column will be centered.</p>
  </div>
</div>

When composing your own Sass classes using @extend you can often end up in a position where a common element (such as grid classes) have been extended so often that the CSS selectors become large and messy. To combat this Milligrid provides every single one of its classes as a mixin so that you can build your own composite CSS styles without ending up in selector hell!

Container Mixins

• container

Row Mixins

• row
• row-top
• row-bottom
• row-center
• row-stretch
• row-baseline
• row-number($i, $column-class-name)

Column Mixins

• column
• column-top
• column-bottom
• column-center
• column-wide($percent)
• column-offset($percent)

The Milligrid system also includes an extended variant which goes beyond the grid system to provide base styling for other HTML elements.

The system's primary aim is to establish a vertical rhythm to the document. The extended styles are incomplete and undocumented, however you can see them in use on this page.