flexbox-grid-mixins/docs/css/grid-type.css

Sass Mixins to generate Flexbox grid

.grid {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -1%;
  margin-right: -1%;
}
.grid > .grid__col-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 6.3333333333%;
  flex: 0 0 6.3333333333%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 14.6666666667%;
  flex: 0 0 14.6666666667%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 23%;
  flex: 0 0 23%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 31.3333333333%;
  flex: 0 0 31.3333333333%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 39.6666666667%;
  flex: 0 0 39.6666666667%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 48%;
  flex: 0 0 48%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-7 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 56.3333333333%;
  flex: 0 0 56.3333333333%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-8 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 64.6666666667%;
  flex: 0 0 64.6666666667%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-9 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 73%;
  flex: 0 0 73%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-10 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 81.3333333333%;
  flex: 0 0 81.3333333333%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-11 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 89.6666666667%;
  flex: 0 0 89.6666666667%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.grid > .grid__col-12 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 98%;
  flex: 0 0 98%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}

@media screen and (max-width: 768px) {
  .grid--responsive {
    -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-flow: column nowrap;
    flex-flow: column nowrap;
    margin-left: -1%;
    margin-right: -1%;
  }
  .grid--responsive > [class*=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: 1%;
    margin-right: 1%;
    margin-bottom: 2%;
  }
}
@media screen and (max-width: 480px) {
  .grid--responsive {
    -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-flow: column nowrap;
    flex-flow: column nowrap;
    margin-left: -1%;
    margin-right: -1%;
  }
  .grid--responsive > [class*=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: 1%;
    margin-right: 1%;
    margin-bottom: 2%;
  }
}
.grid--margin-offset {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.grid--margin-offset > .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%;
  margin-bottom: 2%;
}
.grid--margin-offset > .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%;
  margin-bottom: 2%;
}
.grid--margin-offset > .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%;
  margin-bottom: 2%;
}
.grid--margin-offset > .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%;
  margin-bottom: 2%;
}
.grid--margin-offset > .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%;
  margin-bottom: 2%;
}
.grid--margin-offset > .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%;
  margin-bottom: 2%;
}
.grid--margin-offset > .grid__col-7 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 57.5%;
  flex: 0 0 57.5%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.grid--margin-offset > .grid__col-8 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66%;
  flex: 0 0 66%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.grid--margin-offset > .grid__col-9 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 74.5%;
  flex: 0 0 74.5%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.grid--margin-offset > .grid__col-10 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 83%;
  flex: 0 0 83%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.grid--margin-offset > .grid__col-11 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 91.5%;
  flex: 0 0 91.5%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.grid--margin-offset > .grid__col-12 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  margin-right: 2%;
  margin-bottom: 2%;
}

@media screen and (max-width: 768px) {
  .grid--margin-offset--responsive {
    -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-flow: column nowrap;
    flex-flow: column nowrap;
  }
  .grid--margin-offset--responsive > [class*=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-right: 2%;
    margin-bottom: 2%;
    margin-right: 0;
  }
}
@media screen and (max-width: 480px) {
  .grid--margin-offset--responsive {
    -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-flow: column nowrap;
    flex-flow: column nowrap;
  }
  .grid--margin-offset--responsive > [class*=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-right: 2%;
    margin-bottom: 2%;
    margin-right: 0;
  }
}