Left and right arrow keys navigate. Enter jumps to content.

Controlling cell growth and shrinkage

Skip to navigationSkip to content

Please enable javascript to access the full functionality of this site

Site header

npm install gutter-grid --save

Tag line

A Sass flexbox based grid system that is able to replicate CSS grid-gap in IE11

Toolbar

View Gutter Grid on GitHub
Preferred system:

Body:Controlling cell growth and shrinkage

Another way of handling cell alignments is with grid cell stretch and shrink settings. By default, grid cells will both stretch and shrink as necessary but this can be overridden with the stretch, shrink, and resize settings. With the exception of grid--noStretch / $stretch: false, these generally do not feature legacy browser backups as they are features that are unique to flexbox. The grid is either all stretching or not stretching at all in IE8 and 9. In saying that, these are primarily just alternate ways of assigning flex-grow and flex-shrink properties.

In version 3 stretch was named grow. The name was changed to stretch in version 4 to align with the naming of CSS Grid's justify-items: stretch and justify-self: stretch properties.

Classes for controlling cell growth

  • Stretch classes

    • grid--noStretch will prevent all cells in the grid from stretching.
    • grid--stretch identical to grid--align-stretch (stretches all grid cells).
    • grid__cell--noStretch will prevent only the cell that it is applied to from stretching.
    • grid__cell--stretch will allow a specific grid cell to stretch.

  • Shrink classes

    • grid--noShrink will prevent all cells in the grid from shrinking below their min-content width.
    • grid__cell--noShrink will prevent that specific cell from shrinking bellow it's min-content width.
    • grid__cell--shrink will allow a specific grid cell to shrink.

  • Resize classes

    • grid--noResize a shortcut for applying both grid--noStretch and grid--noShrink classes.
    • grid__cell--noResize a shortcut for applying both grid__cell--noStretch and grid__cell--noShrink classes.
Mixin properties for controlling cell growth
  • $stretch: true will allow all grid cells to stretch.
  • $stretch: false will prevent all cells in the grid from stretching.
  • $shrink: false will prevent all cells in the grid from shrinking below their content width.
  • $resize: false a shortcut for applying both $grow: false and $shrink: false settings at the same time to all grid cells.
  • To apply resize settings to specific cells, just use the flex-grow and flex-shrink css properties.

This is the control example to show how the grid setup behaves with minimal settings. It has a block of content with a maximum width of 400px and a minimum width of 300px. It also has a small block holding only a single word.

Classes format

<div class="grid grid--noWrap">
  <div class="grid__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="grid__cell -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>
Mixin format

<div class="mixin-39">
  <div class="mixin__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="mixin__cell -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>

.mixin-39 {
  @include grid($wrap: false);
}

If grid--noStretch ($stretch: false) is applied, it is essentially the same as using grid--align-left ($align: left). In legacy mode, just like the align properties, turning stretching off also has the side effect of enabling wrapping. If you turn off wrapping explicitly using grid--noWrap or $wrap: false, modern browsers will stop wrapping however IE 8 and 9 will continue to wrap.

Adding grid--noStretch ($stretch: false) is essentially the same as using grid--align-left ($align: left).

Classes format

<div class="grid grid--noWrap grid--noStretch">
  <div class="grid__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="grid__cell -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>
Mixin format

<div class="mixin-40">
  <div class="mixin__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="mixin__cell -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>

.mixin-40 {
  @include grid($stretch: false, $wrap: false);
}

If grid__cell--stretch is applied, it will stretch only that grid cell. The mixin needs to be stretched manually with flex-grow: 1;.

Classes format

<div class="grid grid--noWrap grid--noStretch">
  <div class="grid__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="grid__cell -color-2 grid__cell--stretch">
    <div class="thinBox -color-4"></div>
  </div>
</div>
Mixin format

<div class="mixin-40">
  <div class="mixin__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="mixin__cell -color-2 mixin__cell--stretch">
    <div class="thinBox -color-4"></div>
  </div>
</div>

.mixin-40 {
  @include grid($stretch: false, $wrap: false);
}
.mixin__cell--stretch {
  flex-grow: 1;
}

If grid--noShrink ($shrink: false) is applied, the grid cells will try their best not to shrink below the required width of the content inside them (you will need to resize your browser to a mobile sized view to see the difference)

Classes format

<div class="grid grid--noWrap grid--noShrink">
  <div class="grid__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="grid__cell -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>
Mixin format

<div class="mixin-41">
  <div class="mixin__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="mixin__cell -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>

.mixin-41 {
  @include grid($shrink: false, $wrap: false);
}

grid--noResize ($resize: false) is a shortcut for applying both grid--noShrink ($shrink: false) and grid--noStretch ($stretch: false) at the same time. This will turn on wrapping in legacy mode just like grid--noStretch will.

Classes format

<div class="grid grid--noWrap grid--noResize">
  <div class="grid__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="grid__cell -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>
Mixin format

<div class="mixin-42">
  <div class="mixin__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="mixin__cell -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>

.mixin-42 {
  @include grid($resize: false, $wrap: false);
}

Applying the grid__cell--noStretch class to only 1 of the grid cells (apply flex-grow: 0 manually if using the mixin system)

Classes format

<div class="grid grid--noWrap">
  <div class="grid__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="grid__cell grid__cell--noStretch -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>
Mixin format

<div class="mixin-39">
  <div class="mixin__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="mixin__cell mixin__noGrowth -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>

.mixin-39 {
  @include grid($wrap: false);
}

.mixin__noGrowth {
  flex-grow: 0;
}

Applying the grid__cell--noShrink class to only 1 of the grid cells (apply flex-shrink: 0 manually if using the mixin system)

Classes format

<div class="grid grid--noWrap">
  <div class="grid__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="grid__cell grid__cell--noShrink -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>
Mixin format

<div class="mixin-39">
  <div class="mixin__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="mixin__cell mixin__noShrink -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>

.mixin-39 {
  @include grid($wrap: false);
}

.mixin__noShrink {
  flex-shrink: 0;
}

Applying the grid__cell--noResize class to one of the grid cells prevents that grid cell from shrinking and stretching (apply flex-shrink: 0 and flex-grow: 0 manually if using the mixin system). This is very useful for listings with thumbnail images if you apply noResize to the thumbnail grid cell.

Classes format

<div class="grid grid--noWrap">
  <div class="grid__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="grid__cell grid__cell--noResize -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>
Mixin format

<div class="mixin-39">
  <div class="mixin__cell -color-1">
    <div class="wideBox -color-3" lang="zxx"></div>
  </div>
  <div class="mixin__cell mixin__noResize -color-2">
    <div class="thinBox -color-4"></div>
  </div>
</div>

.mixin-39 {
  @include grid($wrap: false);
}

.mixin__noResize {
  flex-grow: 0;
  flex-shrink: 0;
}

Mini grids

In order to function correctly most of the time, Gutter Grid assumes that the width of the grid is the full width of it's container. It enforces this behaviour with a min-width: 100% setting. To use Gutter Grid on elements that do not take up 100% of their parent's width, a mini setting needs to be enabled on the grid.

The mini setting allows a grid to take up less than 100% of it's parent's width.

Classes format
Default grid set to 50% width
grid--mini class applied on a grid set to 50% width

<figure>
  <figcaption>Default grid set to 50% width</figcaption>
  <div class="grid" style="width: 50%">
    <div class="grid__cell -color-1"></div>
    <div class="grid__cell -color-2"></div>
  </div>
</figure>
<figure>
  <figcaption><code>grid--mini</code> class applied on a grid set to 50% width</figcaption>
  <div class="grid grid--mini" style="width: 50%">
    <div class="grid__cell -color-1"></div>
    <div class="grid__cell -color-2"></div>
  </div>
</figure>
Mixin format
Default grid set to 50% width
$mini: true setting applied on a grid set to 50% width

<figure>
  <figcaption>Default grid set to 50% width</figcaption>
  <div class="mixin-43">
    <div class="mixin__cell -color-1"></div>
    <div class="mixin__cell -color-2"></div>
  </div>
</figure>
<figure>
  <figcaption><code>$mini: true</code> setting applied on a grid set to 50% width</figcaption>
  <div class="mixin-44">
    <div class="mixin__cell -color-1"></div>
    <div class="mixin__cell -color-2"></div>
  </div>
</figure>

.mixin-43 {
  @include grid;
  width: 50%;
}
.mixin-44 {
  @include grid($mini: true);
  width: 50%;
}