flexbox-grid-mixins/docs/css-dart-sass/unit-set.css

Sass Mixins to generate Flexbox grid

[class*=grid-unit-set-],
[class*=grid-gutter-],
[class*=grid--] {
  background: #a5c3e2;
}

[class*=grid__col] {
  background: #0e72da;
  border: 1px solid #130e7d;
  padding: 0.4em;
  color: #fff;
  text-align: center;
}

.grid-unit-set-num {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -20px;
  margin-right: -20px;
}
.grid-unit-set-num .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 33.3333333333% - 40px );
  flex: 0 0 calc( 33.3333333333% - 40px );
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 40px;
}

.grid-unit-set-px {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -7.5px;
  margin-right: -7.5px;
}
.grid-unit-set-px .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  margin-left: 7.5px;
  margin-right: 7.5px;
  margin-bottom: 15px;
}

.grid-unit-set-em {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -1em;
  margin-right: -1em;
}
.grid-unit-set-em .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 30em;
  flex: 0 0 30em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}

.grid-unit-set-per {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -2.5%;
  margin-right: -2.5%;
}
.grid-unit-set-per .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-bottom: 5%;
}

.grid-unit-set-px-per {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -2.5%;
  margin-right: -2.5%;
}
.grid-unit-set-px-per .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-bottom: 5%;
}

.grid-unit-set-px-em {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -1em;
  margin-right: -1em;
}
.grid-unit-set-px-em .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}

.grid-unit-set-em-per {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -2.5%;
  margin-right: -2.5%;
}
.grid-unit-set-em-per .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 30em;
  flex: 0 0 30em;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-bottom: 5%;
}

.grid-unit-set-em-px {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -7.5px;
  margin-right: -7.5px;
}
.grid-unit-set-em-px .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 30em;
  flex: 0 0 30em;
  margin-left: 7.5px;
  margin-right: 7.5px;
  margin-bottom: 15px;
}

.grid-unit-set-per-px {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -7.5px;
  margin-right: -7.5px;
}
.grid-unit-set-per-px .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  margin-left: 7.5px;
  margin-right: 7.5px;
  margin-bottom: 15px;
}

.grid-unit-set-per-em {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -1em;
  margin-right: -1em;
}
.grid-unit-set-per-em .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}

.grid-gutter-px {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -6px;
  margin-right: -6px;
}
.grid-gutter-px .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 8.3333333333% - 12px );
  flex: 0 0 calc( 8.3333333333% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 16.6666666667% - 12px );
  flex: 0 0 calc( 16.6666666667% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 25% - 12px );
  flex: 0 0 calc( 25% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 33.3333333333% - 12px );
  flex: 0 0 calc( 33.3333333333% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 41.6666666667% - 12px );
  flex: 0 0 calc( 41.6666666667% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 50% - 12px );
  flex: 0 0 calc( 50% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-7 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 58.3333333333% - 12px );
  flex: 0 0 calc( 58.3333333333% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-8 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 66.6666666667% - 12px );
  flex: 0 0 calc( 66.6666666667% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-9 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 75% - 12px );
  flex: 0 0 calc( 75% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-10 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 83.3333333333% - 12px );
  flex: 0 0 calc( 83.3333333333% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-11 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 91.6666666667% - 12px );
  flex: 0 0 calc( 91.6666666667% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}
.grid-gutter-px > .grid__col-12 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 100% - 12px );
  flex: 0 0 calc( 100% - 12px );
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}

.grid-gutter-em {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -1em;
  margin-right: -1em;
}
.grid-gutter-em .grid__col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 8.3333333333% - 2em );
  flex: 0 0 calc( 8.3333333333% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 16.6666666667% - 2em );
  flex: 0 0 calc( 16.6666666667% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 25% - 2em );
  flex: 0 0 calc( 25% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 33.3333333333% - 2em );
  flex: 0 0 calc( 33.3333333333% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 41.6666666667% - 2em );
  flex: 0 0 calc( 41.6666666667% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 50% - 2em );
  flex: 0 0 calc( 50% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-7 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 58.3333333333% - 2em );
  flex: 0 0 calc( 58.3333333333% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-8 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 66.6666666667% - 2em );
  flex: 0 0 calc( 66.6666666667% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-9 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 75% - 2em );
  flex: 0 0 calc( 75% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-10 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 83.3333333333% - 2em );
  flex: 0 0 calc( 83.3333333333% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-11 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 91.6666666667% - 2em );
  flex: 0 0 calc( 91.6666666667% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}
.grid-gutter-em > .grid__col-12 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc( 100% - 2em );
  flex: 0 0 calc( 100% - 2em );
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
}