Core Framework v2.2.0 – Documentation

Grid

The grid is a powerful layouting tool. You can use grids to arrange your page frame, position content teasers, arrange link lists, and basically anything in between. The grid is also set up responsive to allow different layouts on different devices.

See also the extended flex grid for more layouting options.

  1. Grid Wrapper
  2. Gutters
  3. Grid Items
  4. Sizes
  5. Responsive Grids
  6. Nesting Grids
  7. Pushing

Grid Wrapper

Grids are enclosed in a wrapper that contains the grid's individual columns and determines the offset (gutters) between single columns.

Grid wrapper
<div class="grid"></div>

Note: Be sure to apply no custom styling to a grid container or its grid items. While this may work in some cases, it will, more likely than not, result in broken layouts due to the way that the grid items are being positioned beneath the hood. Use wrappers or children instead for borders, backgrounds, paddings, etc.

Gutters

The grid gutter determines whether the content columns of a grid should take up all of the available space, or be separated by horizontal and/or vertical white space.

The syntax for gutter classes is gutter-<side>-<size> (analogous to Spacings).

Grids with different gutters (Grid content added for demonstrational purposes) 
<div class="grid"></div>

<div class="grid gutter"></div>

<div class="grid gutter-s"></div>

<div class="grid gutter-horizontal-xl"></div>

<div class="grid gutter-vertical-l"></div>

Grid Items

Grid items are the elements that form a grid's individual content columns.

Grid with two grid items
<div class="grid">
    <div class="grid-item">
        <div class="demo-box-1" style="height: 1.5em;"></div>
    </div>
    <div class="grid-item">
        <div class="demo-box-2" style="height: 1.5em;"></div>
    </div>
</div>

Sizes

You can use the global width classes to split your grid columns into fractions of two, three, four, five, six, eight, ten, and twelve.

Please see the Widths section for a full explanation.

Grid with three ⅓-wide columns. (Backgrounds added for demonstrational purposes) 
<div class="grid">
    <div class="grid-item one-third">
        <div class="demo-box-1" style="height:1.5em;"></div>
    </div>
    <div class="grid-item one-third">
        <div class="demo-box-2" style="height:1.5em;"></div>
    </div>
    <div class="grid-item one-third">
        <div class="demo-box-1" style="height:1.5em;"></div>
    </div>
</div>

Responsive Grids

The responsive grid has three states:

  1. palm for palm-held devices like mobile phones, smart phones, small tablets, smart watches etc.;
  2. lap for lap-held devices like larger tablets, iPads, netbooks;
  3. desk for desk-top computers, laptops, and generally everything with a screen over 1024 pixels wide.

These states can be explicitly targeted to achieve different layouts for different devices.

Grid with state-specific layouts
<div class="grid">
    <div class="grid-item palm-one-whole lap-one-half desk-one-third">
        <div class="demo-box-1" style="height:1.5em;"></div>
    </div>
    <div class="grid-item palm-one-whole lap-one-half desk-one-third">
        <div class="demo-box-2" style="height:1.5em;"></div>
    </div>
    <div class="grid-item palm-one-whole lap-one-whole desk-one-third">
        <div class="demo-box-3" style="height:1.5em;"></div>
    </div>
</div>

Please see Widths for a full explanation.

Nesting Grids

Grids can be infinitely nested inside each other. You can also mix and match grids with and without gutters, you can change the amount of items in each grid, and so forth. Just keep in mind to wrap each grid in its own grid-item.

Nested grids (Backgrounds added for demonstrational purposes.) 
<div class="grid gutter-m">
  <div class="grid-item two-thirds">
    Column 1
    <div class="grid gutter-s">
      <div class="grid-item one-half">
        Column 1.1
      </div>
      <div class="grid-item one-half">
        Column 1.2
        <div class="grid gutter-xs">
          <div class="grid-item one-half">
            Column 1.2.1
          </div>
          <div class="grid-item one-half">
            Column 1.2.2
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-item one-third">
    Column 2
  </div>
</div>
Column 1
Column 1.1
Column 1.2
Column 1.2.1
Column 1.2.2
Column 2

Pushing

Grid items can be pushed to the right to align elements or to create whitespace. You can do this by using the “push” classes.

Push classes follow the syntax <state>-push-<width-class>, where “state” is one of the usual state prefixes, i.e. “palm”, “lap”, or “desk”, and “width-class” is one of the width classes mentioned above.

For example: palm-push-two-thirds will push a grid item to the right by two thirds, but only on palm-sized devices.

Pushed grid items (Backgrounds added for demonstrational purposes.) 
<div class="grid gutter-xs">
    <div class="grid-item two-thirds">
        <div class="demo-
	box-1" style="min-height: 2em;"></div>
    </div>
    <div class="grid-item one-third">
        <div class="demo-box-2" style="min-height: 2em;"></div>
    </div>
    <div class="grid-item one-third">
        <div class="demo-box-1" style="min-height: 2em;"></div>
    </div>
    <div class="grid-item one-third push-one-third">
        <div class="demo-box-2" style="min-height: 2em;"></div>
    </div>
</div>