Grid Column

The grid-column() mixin specifies the width of an object, usually based on the number of columns an element should span.

@include grid-column(
    $columns: false,
    $collapse: false,
    $center: false
  );

Arguments

`$columns`

The columns argument is the unitless number of columns the element spans. The default of this property is false which will cause the object to be 100% of its container, or full-width.

A set of values can also be passed in to specify the number of columns the object is as well as the number of total columns in this instance. Values can be separated with a of as in 7 of 12. This is useful for specific layouts that break the default column count of the project defined in the $grid-settings.

If only one value is passed, the number of total columns is the total-columns set in the $grid-settings.

`$collapse`

The collapse argument is a boolean attribute that will cause the element to consume the margins on either side of it. The default of this property is false which will cause the object preserve the gutters on either side. This option is useful when creating containers as well as nested grids.

`$center`

The center argument is a boolean attribute that will cause the element no longer be floated and will instead be centered in its container.

Examples

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

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

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

.card {
	margin-left: 1.25rem;
  margin-right: 0;
  float: left;
  width: calc(40% - 1.75rem);
}

.card {
  @include grid-column($columns: 6, $center: true);
}

.card {
  margin-left: auto;
  margin-right: auto;
  float: none;
  width: calc(50% - 1.875rem);
}

.card {
  @include grid-column($columns: 1 of 2, $collapse: true);
}

.card {
  margin-left: 0;
  margin-right: -1.25rem;
  float: left;
  width: calc(50% - -0.625rem);
}