Gutter Grid: Using columns

Body:Using columns

Without defining columns, a grid can easily end up looking like this:

A default grid that has no columns defined

Classes format

lots and lots and lots of text in this cell.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas. Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. At ille pellit, qui permulcet sensum voluptate. Videamus igitur sententias eorum, tum ad verba redeamus. Duo Reges: constructio interrete. Quantum Aristoxeni ingenium consumptum videmus in musicis.

Barely any text in this cell


<div class="grid">
  <div class="grid__cell -color-1 add-padding"><p>lots and lots and lots of text in this cell.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
At ille pellit, qui permulcet sensum voluptate. Videamus igitur sententias eorum, tum ad verba redeamus.
Duo Reges: constructio interrete. Quantum Aristoxeni ingenium consumptum videmus in musicis.</p>

  </div>
  <div class="grid__cell -color-2 add-padding"><p>Barely any text in this cell</p>

  </div>
</div>

Mixin format

lots and lots and lots of text in this cell.

Barely any text in this cell


<div class="mixin-1">
  <div class="mixin__cell -color-1 add-padding"><p>lots and lots and lots of text in this cell.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
At ille pellit, qui permulcet sensum voluptate. Videamus igitur sententias eorum, tum ad verba redeamus.
Duo Reges: constructio interrete. Quantum Aristoxeni ingenium consumptum videmus in musicis.</p>

  </div>
  <div class="mixin__cell -color-2 add-padding"><p>Barely any text in this cell</p>

  </div>
</div>


.mixin-1 {
  @include grid;
}

To ensure that cells take up only 50% width each, add a grid--cols-2 class to the same element as the grid class if using the class system. If using the mixin system, add a 2 as the first parameter.

The previous example but with the grid set to 2 columns

Classes format

lots and lots and lots of text in this cell.

Barely any text in this cell


<div class="grid grid--cols-2">
  <div class="grid__cell -color-1 add-padding"><p>lots and lots and lots of text in this cell.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
At ille pellit, qui permulcet sensum voluptate. Videamus igitur sententias eorum, tum ad verba redeamus.
Duo Reges: constructio interrete. Quantum Aristoxeni ingenium consumptum videmus in musicis.</p>

  </div>
  <div class="grid__cell -color-2 add-padding"><p>Barely any text in this cell</p>

  </div>
</div>

Mixin format

lots and lots and lots of text in this cell.

Barely any text in this cell


<div class="mixin-2">
  <div class="mixin__cell -color-1 add-padding"><p>lots and lots and lots of text in this cell.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
At ille pellit, qui permulcet sensum voluptate. Videamus igitur sententias eorum, tum ad verba redeamus.
Duo Reges: constructio interrete. Quantum Aristoxeni ingenium consumptum videmus in musicis.</p>

  </div>
  <div class="mixin__cell -color-2 add-padding"><p>Barely any text in this cell</p>

  </div>
</div>


.mixin-2 {
  // Short hand:
  @include grid(2);

  // Long hand:
  @include grid($cols: 2);
}

The added bonus of assigning columns to a grid is that there are baked in media queries for typical break points. This lets you build your site layout and not have to worry as much about making it mobile friendly.

Examples of all the default column widths. Resize your browser to watch the media queries take effect.

Classes format


<div class="grid grid--cols-2">
  <div class="grid__cell -color-1"></div>
  <div class="grid__cell -color-2"></div>
</div>
<hr/>
<div class="grid grid--cols-3">
  <div class="grid__cell -color-1"></div>
  <div class="grid__cell -color-2"></div>
  <div class="grid__cell -color-3"></div>
</div>
<hr/>
<div class="grid grid--cols-4">
  <div class="grid__cell -color-1"></div>
  <div class="grid__cell -color-2"></div>
  <div class="grid__cell -color-3"></div>
  <div class="grid__cell -color-4"></div>
</div>
<hr/>
<div class="grid grid--cols-5">
  <div class="grid__cell -color-1"></div>
  <div class="grid__cell -color-2"></div>
  <div class="grid__cell -color-3"></div>
  <div class="grid__cell -color-4"></div>
  <div class="grid__cell -color-5"></div>
</div>
<hr/>
<div class="grid grid--cols-6">
  <div class="grid__cell -color-1"></div>
  <div class="grid__cell -color-2"></div>
  <div class="grid__cell -color-3"></div>
  <div class="grid__cell -color-4"></div>
  <div class="grid__cell -color-5"></div>
  <div class="grid__cell -color-6"></div>
</div>

Mixin format


<div class="mixin-2">
  <div class="mixin__cell -color-1"></div>
  <div class="mixin__cell -color-2"></div>
</div>
<hr/>
<div class="mixin-3">
  <div class="mixin__cell -color-1"></div>
  <div class="mixin__cell -color-2"></div>
  <div class="mixin__cell -color-3"></div>
</div>
<hr/>
<div class="mixin-4">
  <div class="mixin__cell -color-1"></div>
  <div class="mixin__cell -color-2"></div>
  <div class="mixin__cell -color-3"></div>
  <div class="mixin__cell -color-4"></div>
</div>
<hr/>
<div class="mixin-5">
  <div class="mixin__cell -color-1"></div>
  <div class="mixin__cell -color-2"></div>
  <div class="mixin__cell -color-3"></div>
  <div class="mixin__cell -color-4"></div>
  <div class="mixin__cell -color-5"></div>
</div>
<hr/>
<div class="mixin-6">
  <div class="mixin__cell -color-1"></div>
  <div class="mixin__cell -color-2"></div>
  <div class="mixin__cell -color-3"></div>
  <div class="mixin__cell -color-4"></div>
  <div class="mixin__cell -color-5"></div>
  <div class="mixin__cell -color-6"></div>
</div>


.mixin-2 {
  @include grid(2);
}

.mixin-3 {
  @include grid(3);
}

.mixin-4 {
  @include grid(4);
}

.mixin-5 {
  @include grid(5);
}

.mixin-6 {
  @include grid(6);
}

Customising the columns and breakpoints

If you don't like the default breakpoints or you need more columns, you can easily edit them by altering the $grid-break-points variable.

Note that you can use mq-scss syntax to define custom media queries. This means that you can define the column break points using just about any media query you like. Gutter Grid was designed to work Desktop first for better legacy browser support. It is unwise to try and take a mobile first min-width approach on these settings. Also, if there is a need for supprting legacy browsers (IE 8 & 9), taking a min-width approach will certainly break Gutter Grid's legacy support unless UnMQ has been integrated into your build process.

These are the default settings. Edit them by placing a $grid-break-points variable before the import statements. The index of each set of values represents the default column count for that set of values. false = no media queries. The numbers on the left represent column count. The values on the right dictate when the column count will take effect.


//These are the default breakpoints
$grid-break-points: (

  // 2 column grid
  2: (
    // At 600px wide screen and below, make it a 1 column grid
    1: 600px,
  ),

  // 3 column grid
  3: (
    // Use mq-scss syntax if preferred
    2 : (max, 960px),
    1 : (max, 600px),
  ),

  // 4 column grid
  4: (
    2 : 960px,
    1 : 480px,
  ),

  // 5 column grid
  5: (
    3 : 960px,
    2 : 600px,
    1 : 480px,
  ),

  // 6 column grid
  6: (
    3 : 960px,
    2 : 600px,
    1 : 480px,
  )
);

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-mixin';
@import '../node_modules/gutter-grid/grid-classes';

If you prefer, you can specify percentage column widths instead of column counts on the breakpoint values.


// Percentage widths can be used on the breakpoint values instead if prefered.

$grid-break-points: (
  // 2 column grid
  2: (
    // At 600px wide screen and below, columns are 100% wide
    100% : 600px,
  ),

  // 3 column grid
  3: (
    // Use mq-scss syntax if preferred
    50% : (max, 960px),
    100% : (max, 600px),
  ),

  // 4 column grid
  4: (
    50% : 960px,
    100% : 480px,
  ),

  // 5 column grid
  5: (
    33.33% : 960px,
    50% : 600px,
    100% : 480px,
  ),

  // 6 column grid
  6: (
    33.33% : 960px,
    50% : 600px,
    100% : 480px,
  )
);

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-mixin';
@import '../node_modules/gutter-grid/grid-classes';

You can disable all break points by setting $grid-break-points to false. This will allow you to have up to 6 columns when using the class based grid system.


//Disable all breakpoints
$grid-break-points: false;

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-mixin';
@import '../node_modules/gutter-grid/grid-classes';

Mixin column breakpoints

One of the strengths of the mixin version is that it can accept any number of columns without the need for the global $grid-break-points variable to be updated. Using anything over 6 columns will not have any default breakpoints applied to it though. Fortunately, the mixin version also features the ability to assign it custom breakpoints using the $breakpoints setting.

Assigning custom breakpoints to a grid that contains more than 6 columns. (Mixin version only)


<div class="mixin-7">
  <div class="mixin__cell -color-1"></div>
  <div class="mixin__cell -color-2"></div>
  <div class="mixin__cell -color-3"></div>
  <div class="mixin__cell -color-4"></div>
  <div class="mixin__cell -color-5"></div>
  <div class="mixin__cell -color-6"></div>
  <div class="mixin__cell -color-2"></div>
</div>


.mixin-7 {
  @include grid(7, $breakpoints: (
    // On a 960px wide screen or below,
    // there will be 4 columns
    4 : 960px,

    //you can use mq-scss syntax here as well
    2 : (max, 600px),

    // You can use percentage column widths
    // instead of column counts if prefered
    100% : 480px,
  ));
}

Note that you can use mq-scss syntax here as well if you like. You can also use percentages instead of column counts.

The ieFloat setting

One common problem is that when grid cells have a large amount of content in them, the columns will grow outside their bounds even when you give them a column count.

If you view this demo in IE8 or 9, you will see that the grid cells extend beyond the boundaries of the available grid area.

Classes format

|| Lorem ipsum dolor sit amet. Et et enim.

|| Lorem ipsum dolor sit amet. Et et enim.

|| Lorem ipsum dolor sit amet. Et et enim.


<div class="grid grid--cols-3">
  <div class="grid__cell -color-1">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
  <div class="grid__cell -color-2">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
  <div class="grid__cell -color-3">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
</div>

Mixin format

|| Lorem ipsum dolor sit amet. Et et enim.

|| Lorem ipsum dolor sit amet. Et et enim.

|| Lorem ipsum dolor sit amet. Et et enim.


<div class="mixin-3">
  <div class="mixin__cell -color-1">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
  <div class="mixin__cell -color-2">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
  <div class="mixin__cell -color-3">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
</div>


.mixin-3 {
  @include grid(3);
}

The easiest way to fix this issue in most cases is to use the ieFloat setting. This setting forces the grid to use the float:left backup instead of the display:table backup when the browser doesn't support flexbox. float:left is much more obedient when it comes to setting column widths than display:table, so it often fixes the issue of content overflowing the page layout.

Same example again except this time with ieFloat turned on

Classes format

|| Lorem ipsum dolor sit amet. Et et enim.

|| Lorem ipsum dolor sit amet. Et et enim.

|| Lorem ipsum dolor sit amet. Et et enim.


<div class="grid grid--cols-3 grid--ieFloat">
  <div class="grid__cell -color-1">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
  <div class="grid__cell -color-2">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
  <div class="grid__cell -color-3">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
</div>

Mixin format

|| Lorem ipsum dolor sit amet. Et et enim.

|| Lorem ipsum dolor sit amet. Et et enim.

|| Lorem ipsum dolor sit amet. Et et enim.


<div class="mixin-45">
  <div class="mixin__cell -color-1">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
  <div class="mixin__cell -color-2">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
  <div class="mixin__cell -color-3">
    <pre>|| Lorem ipsum dolor sit amet. Et et enim.</pre>
  </div>
</div>


.mixin-45 {
  @include grid(3, $ieFloat: true);
}

Using columns

Site header

Tag line

Body:Using columns

Customising the columns and breakpoints

Mixin column breakpoints

The ieFloat setting

Toolbar

Customising the columns and breakpoints

Mixin column breakpoints

The ieFloat setting