flexbox-grid-mixins/docs/css-dart-sass/example-margin-offset-unset.css

Sass Mixins to generate Flexbox grid

.grid--items-row-alignment {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.grid--items-row-alignment > .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  margin-right: 2%;
}
.grid--items-row-alignment > .grid__col-auto {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  -ms-flex-item-align: auto;
  align-self: auto;
  margin-right: 2%;
}
.grid--items-row-alignment > .grid__col-top {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  -ms-flex-item-align: start;
  align-self: flex-start;
  margin-right: 2%;
}
.grid--items-row-alignment > .grid__col-middle {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  -ms-flex-item-align: center;
  align-self: center;
  margin-right: 2%;
}
.grid--items-row-alignment > .grid__col-bottom {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  -ms-flex-item-align: end;
  align-self: flex-end;
  margin-right: 2%;
}
.grid--items-row-alignment > .grid__col-stretch {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  margin-right: 2%;
}
.grid--items-row-alignment > .grid__col-baseline {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  -ms-flex-item-align: baseline;
  align-self: baseline;
  margin-right: 2%;
}

.grid--items-column-alignment {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.grid--items-column-alignment > .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  width: 15%;
  margin-right: 2%;
}
.grid--items-column-alignment > .grid__col-auto {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  -ms-flex-item-align: auto;
  align-self: auto;
  width: 15%;
  margin-right: 2%;
}
.grid--items-column-alignment > .grid__col-top {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  -ms-flex-item-align: start;
  align-self: flex-start;
  width: 15%;
  margin-right: 2%;
}
.grid--items-column-alignment > .grid__col-middle {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  -ms-flex-item-align: center;
  align-self: center;
  width: 15%;
  margin-right: 2%;
}
.grid--items-column-alignment > .grid__col-bottom {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  -ms-flex-item-align: end;
  align-self: flex-end;
  width: 15%;
  margin-right: 2%;
}

.grid--multi-line-top {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  height: 18em;
}
.grid--multi-line-top > .grid__col-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 6.5%;
  flex: 0 0 6.5%;
  margin-right: 2%;
}
.grid--multi-line-top > .grid__col-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  margin-right: 2%;
}
.grid--multi-line-top > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 23.5%;
  flex: 0 0 23.5%;
  margin-right: 2%;
}
.grid--multi-line-top > .grid__col-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 32%;
  flex: 0 0 32%;
  margin-right: 2%;
}
.grid--multi-line-top > .grid__col-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40.5%;
  flex: 0 0 40.5%;
  margin-right: 2%;
}
.grid--multi-line-top > .grid__col-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49%;
  flex: 0 0 49%;
  margin-right: 2%;
}

.grid--multi-line-middle {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 18em;
}
.grid--multi-line-middle > .grid__col-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 6.5%;
  flex: 0 0 6.5%;
  margin-right: 2%;
}
.grid--multi-line-middle > .grid__col-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  margin-right: 2%;
}
.grid--multi-line-middle > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 23.5%;
  flex: 0 0 23.5%;
  margin-right: 2%;
}
.grid--multi-line-middle > .grid__col-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 32%;
  flex: 0 0 32%;
  margin-right: 2%;
}
.grid--multi-line-middle > .grid__col-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40.5%;
  flex: 0 0 40.5%;
  margin-right: 2%;
}
.grid--multi-line-middle > .grid__col-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49%;
  flex: 0 0 49%;
  margin-right: 2%;
}

.grid--multi-line-bottom {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-line-pack: end;
  align-content: flex-end;
  height: 18em;
}
.grid--multi-line-bottom > .grid__col-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 6.5%;
  flex: 0 0 6.5%;
  margin-right: 2%;
}
.grid--multi-line-bottom > .grid__col-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  margin-right: 2%;
}
.grid--multi-line-bottom > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 23.5%;
  flex: 0 0 23.5%;
  margin-right: 2%;
}
.grid--multi-line-bottom > .grid__col-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 32%;
  flex: 0 0 32%;
  margin-right: 2%;
}
.grid--multi-line-bottom > .grid__col-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40.5%;
  flex: 0 0 40.5%;
  margin-right: 2%;
}
.grid--multi-line-bottom > .grid__col-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49%;
  flex: 0 0 49%;
  margin-right: 2%;
}

.grid--multi-line-space-between {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-line-pack: justify;
  align-content: space-between;
  height: 18em;
}
.grid--multi-line-space-between > .grid__col-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 6.5%;
  flex: 0 0 6.5%;
  margin-right: 2%;
}
.grid--multi-line-space-between > .grid__col-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  margin-right: 2%;
}
.grid--multi-line-space-between > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 23.5%;
  flex: 0 0 23.5%;
  margin-right: 2%;
}
.grid--multi-line-space-between > .grid__col-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 32%;
  flex: 0 0 32%;
  margin-right: 2%;
}
.grid--multi-line-space-between > .grid__col-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40.5%;
  flex: 0 0 40.5%;
  margin-right: 2%;
}
.grid--multi-line-space-between > .grid__col-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49%;
  flex: 0 0 49%;
  margin-right: 2%;
}

.grid--multi-line-space-around {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  height: 18em;
}
.grid--multi-line-space-around > .grid__col-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 6.5%;
  flex: 0 0 6.5%;
  margin-right: 2%;
}
.grid--multi-line-space-around > .grid__col-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  margin-right: 2%;
}
.grid--multi-line-space-around > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 23.5%;
  flex: 0 0 23.5%;
  margin-right: 2%;
}
.grid--multi-line-space-around > .grid__col-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 32%;
  flex: 0 0 32%;
  margin-right: 2%;
}
.grid--multi-line-space-around > .grid__col-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40.5%;
  flex: 0 0 40.5%;
  margin-right: 2%;
}
.grid--multi-line-space-around > .grid__col-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49%;
  flex: 0 0 49%;
  margin-right: 2%;
}

.grid--multi-line-stretch {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  height: 18em;
}
.grid--multi-line-stretch > .grid__col-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 6.5%;
  flex: 0 0 6.5%;
  margin-right: 2%;
}
.grid--multi-line-stretch > .grid__col-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  margin-right: 2%;
}
.grid--multi-line-stretch > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 23.5%;
  flex: 0 0 23.5%;
  margin-right: 2%;
}
.grid--multi-line-stretch > .grid__col-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 32%;
  flex: 0 0 32%;
  margin-right: 2%;
}
.grid--multi-line-stretch > .grid__col-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40.5%;
  flex: 0 0 40.5%;
  margin-right: 2%;
}
.grid--multi-line-stretch > .grid__col-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49%;
  flex: 0 0 49%;
  margin-right: 2%;
}