Toggle Guidelines

Milligrid.

A configurable flexbox CSS grid based on Milligram.

About the Grid

Milligrid is a responsive CSS grid system which uses flexbox as a basis for its layout. It is based on the excellent grid built into Milligram, which was in turn based on work by Philip Walton. Milligrid aims to take the brilliant Milligram grid and provide it in a standalone package with enhanced configuration options in the form of Sass variables.

Milligrid supports both ltr and rtl layout directions via the dir HTML attribute.

Get Milligrid

  1. Download
  2. Install with bower: bower install milligrid

Find out more

Check out Milligrid on GitHub.

Grid Basics

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>

Single item on a row.

First row item.

Second row item.

Nested Grids

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>

Column in parent.

Column in child.

Column in child.

.row Item Limits

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>

1st item on the row.

2nd item on the row.

3rd item on the row.

4th item will wrap to the next line.

Offsets and Column Widths

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>

0x offset, 4x width.

2x offset, 6x width.

Vertical Alignment

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>

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.

Short column will be on the bottom of the row.

Short column will be centered.

Sass Configuration

Variables

$rule-prefix

Defines an optional prefix that can will be prepended to all rule names. This is particularly useful if you need to deploy Milligrid in conjunction with another system which has colliding names (such as Bootstrap or Milligram).

$container-max-width

The maximum width of the page that the encompassing .container will stretch to. Override this value for a thin, thick or fluid grid width.

$gutter-width

The amount of horizontal space that each .column will reserve on either side of it. The effective distance between .column elements inside the grid will be doubled.

$gutter-width-vertical

The amount of vertical space that will be left between each .row element and also between .column elements on a row which have wrapped onto the next line

$maximum-items-per-row

The maximum of items which will be allowed on a .row before wrapping occurs. Remember that individual rows can be configured later using .row-#classes so a high number with lots of divisors is a good idea, such as 12, 15 or 16

$columns-as-rows-threshold

On smaller devices it doesn't make sense to still try to display 12 elements on a row. This variable allows configuration of the point at which .column elements in a row appear as rows themselves.

Mixins

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)

Milligrid Extended

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.