2 #True-Grid True Grid

The True Grid is based on the Bootstrap grid, and follows most of the same conventions. The key difference is the True Grid remains aligned to the global grid, rather than adjusting to the parent container. In other words, a two-column wide element will always be the same width, regardless of how deeply nested it is.

How to use true grid (these are essentially the same rules as the Bootstrap3 grid):

  • Rows must be within a .container or .container-fluid for proper alignment and padding. This is typically a top level container on the page. See page layout for more on this.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Create a column using the .true-grid-{n} classes (where {n} is 1 through 12). Don't apply other classes that affect padding to the same element or it will mis-align the grid.
  • If you are also use bootstrap grid columns, don't place true grid columns within bootstrap columns. The widths will not work as expected.
Example
3 column
2 column
4 column with nested row
2 column
2 column
  <div class="row">
    <div class="true-grid-3 ">3 column</div>
    <div class="true-grid-2">2 column</div>
    <div class="true-grid-4">4 column with nested row
      <div class="row">
        <div class="true-grid-2">2 column</div>
        <div class="true-grid-2">2 column</div>
      </div>
    </div>
  </div>

2.1 #True-Grid.Offsets Offsets

Use offset classes to shift a column to the right. This is useful for creating a gap between columns.

Example
2 column with 1-column offset
1 column with 3-column offset
  <div class="row">
    <div class="true-grid-2 true-grid-offset-1">2 column with 1-column offset</div>
    <div class="true-grid-1 true-grid-offset-3">1 column with 3-column offset</div>
  </div>

2.2 #True-Grid.Sizing Additional sizing

Occasionally, an element needs to be a specific percentage width of its parent, regardless of the grid. Use these classes to make elements 50%, 33%, 67%, 25%, or 75% width of their container.

.true-grid-{n} classes will not work inside of these elements.
Variations:
  • true-grid-half
    50% column
  • true-grid-quarter
    25% column
  • true-grid-three-quarter
    75% column
  • true-grid-third
    33.33% column
  • true-grid-two-third
    66.67% column