Control wrapping

Prior to version 4, wrapping was not enabled by default on desktop sized screens. To enable wrapping on desktop, a grid--wrap class needed to be added if using the class based system. If using the mixin based system, $wrap needed to be set to true. Without stating that the grid cells should wrap, if there were too many grid cells for the number of columns, it would squeeze them all together instead of wrapping them.

In version 4, this was changed. Wrapping will automatically be enabled by default under the following circumstances:

• A column count has been defined
• It has been explicitly enabled using $wrap: true in the mixin or .grid--wrap in the class system
• The screen width is less than the $grid-page-width setting which is 1200px by default (more on that a bit later)

Note that if $grid-legacy-support is enabled in version 4+, it reverts back to the version 3 behaviour of needing the $wrap setting to be explicitly enabled (or grid--wrap class applied) before it will wrap. This was a limitation that came from trying to provide the best possible fallback code for IE 8 and 9.

<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 class="grid__cell -color-4"></div>
  <div class="grid__cell -color-5"></div>
  <div class="grid__cell -color-6"></div>
</div>

<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 class="mixin__cell -color-4"></div>
  <div class="mixin__cell -color-5"></div>
  <div class="mixin__cell -color-6"></div>
</div>

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

<div class="grid grid--cols-3 grid--wrap">
  <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>

<div class="mixin-8">
  <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-8 {
  @include grid(3, $wrap: true);
}

In legacy mode, when the browser window is less than the width defined by the $grid-page-width setting, wrapping becomes enabled by default. This is so that the content in the grid is able to adapt to the smaller screen sizes. This behavior is consistent across both versions 3 and 4. It is named $grid-page-width since it is meant to be the screen width at which the edge of the desktop design meets the edge of the screen.

//This is the default setting
$grid-page-width: 1200px;

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

To just outright disable grid wrapping for all screen sizes, use the grid--noWrap class for the class based system or set $wrap to false if using the mixin. Modern browsers will try and squeeze all of the grid cells down into a single row. This can lead to more columns being generated than you intended.

<div class="grid grid--cols-3 grid--noWrap">
  <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>

<div class="mixin-9">
  <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-9 {
  @include grid(3, $wrap: false);
}

This is different from disabling the default media queries though. If you want to just prevent the default media queries from affecting the grid, it's better to use the grid--noMQs class for the class based system or the $MQs: false setting if using the mixin. You will learn more about disabling media queries on the next page.