Grid Push

Push columns away from their container

View Source

The grid-push() mixin causes an object to push or pull a Grid Column horizontally in the direction of the default-float. The mixin will override the column's margin and move the column left or right.

SCSS

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

Arguments

$push

The push argument is the unitless number of columns (based on the default column count) the element will be moved pushed. Positive values will push the column and negative values will pull it.

The default for this value is false which will cause the margin to reset to the default gutter value.

👍

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

Examples

SCSS

.card {
  @include grid-column(5);
  @include grid-push(2);
}

CSS

.card {
	margin-left: 1.25rem;
  margin-right: 0;
  float: left;
  width: calc(41.66667% - 1.77083rem);
  margin-left: calc(16.66667% - 1.45833rem + 2.5rem);
}