flexbox grid

flexbox_grid

/*--------------------------------------------------------------
  Flexbox grid
--------------------------------------------------------------*/

// Wrapper
.grid {
  display: flex;
}

// Alignment per row
.grid--top {
  align-items: flex-start;
}
.grid--bottom {
  align-items: flex-end;
}
.grid--center {
  align-items: center;
}

// Padding support
.grid--padding {
  & > div {
    margin-right: $size-gutter / 2;
    margin-left: $size-gutter / 2;
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}

// Induvidual cell
.grid__cell {
  flex: 1;
}

// Alignment per cell
.grid__cell--top {
  align-self: flex-start;
}
.grid__cell--bottom {
  align-self: flex-end;
}
.grid__cell--center {
  align-self: center;
}