Grid Shift

Shift columns and reorder them within their container

View Source

The grid-shift() mixin uses relative positioning to shift a Grid Column horizontally. The mixin behaves similarly to Grid Push but will allow you to move sibling columns independent of each other. This is most useful in reordering columns of content on different screen sizes.

SCSS

@include grid-shift(
  	$shift: false
  );

Arguments

$shift

The shift argument is the unitless number of columns (based on the default column count) the element will be moved shifted. Positive values will shift the column away from its float direction and negative values will shift them toward the default float direction.

The default for this value is false which will cause the object to reset its position.

👍

Like the grid-column mixin, grid-push also accepts sub-grid settings like 2 of 5 or 4 of 7.

📘

Relative positioning

The grid-shift() mixin requires that the column be position: relative in order to be moved. This may effect other aspects of your layout, especially if you are using absolutely positioned elements inside the column.

Examples

SCSS

.card {
  @include grid-column(5);
  @include grid-shift(4)
}

CSS

.card {
  margin-left: 1.25rem;
  margin-right: 0;
  float: left;
  width: calc(33.33333% - 1.66667rem);
  left: calc(33.33333% - 1.66667rem + 1.25rem);
  position: relative;
}