Grid Row

Create default and collapsed rows

View Source

The grid-row() mixin creates a container, in to which grid columns and other objects can be placed. It contains 3 major features:

1. It has collapsed gutters
2. The object is full width but contains a max-width
3. A clearfix is also added

SCSS

@include grid-row(
    $center: true,
    $max-width: grid-settings(row-width)
  );

Arguments

$center

Unlike the grid-column mixin, the center argument in the grid-column mixin defaults to true. As with the columns, true causes the element not to be floated and instead be centered in its container. Setting this to false will cause the element to floated to the default-float set in the $grid-settings.

$max-width

The max-width argument directly sets the max-width property on the element. any format that fits the max-width css specification will be accepted. This value will default to the max-width set in the $grid-settings.

Examples

SCSS

.card {
  @include grid-row();
}

CSS

.card {
  margin-left: auto;
  margin-right: auto;
  float: none;
  width: calc(100% - 0rem);
  max-width: 80rem;
}

.card:after {
  clear: both;
  content: "";
  display: table;
}

SCSS

.card {
	@include grid-row($center: false, $max-width: none;
}

CSS

.card {
  margin-left: 0;
  margin-right: 0;
  float: left;
  width: calc(100% - 0rem);
  max-width: none;
}

.card:after {
  clear: both;
  content: "";
  display: table;
}