simple column layout

flexgrid.css

.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}

.flex-row.has-gap-1 > * + * {
  margin-left: 5px;
}

.flex-row.has-gap-2 > * + * {
  margin-left: 10px;
}

.flex-row.has-gap-3 > * + * {
  margin-left: 15px;
}

.flex-row.has-gap-4 > * + * {
  margin-left: 20px;
}

.flex-row.has-gap-5 > * + * {
  margin-left: 25px;
}

.flex-row.has-gap-6 > * + * {
  margin-left: 30px;
}

.flex-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.flex-col.is-1 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.flex-col.is-2 {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}

.flex-col.is-3 {
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
}

.flex-col.is-4 {
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
}

.flex-col.is-5 {
  -webkit-box-flex: 5;
      -ms-flex: 5;
          flex: 5;
}

.flex-col.is-6 {
  -webkit-box-flex: 6;
      -ms-flex: 6;
          flex: 6;
}

.flex-col.is-7 {
  -webkit-box-flex: 7;
      -ms-flex: 7;
          flex: 7;
}

.flex-col.is-8 {
  -webkit-box-flex: 8;
      -ms-flex: 8;
          flex: 8;
}

.flex-col.is-9 {
  -webkit-box-flex: 9;
      -ms-flex: 9;
          flex: 9;
}

.flex-col.is-10 {
  -webkit-box-flex: 10;
      -ms-flex: 10;
          flex: 10;
}

.flex-col.is-11 {
  -webkit-box-flex: 11;
      -ms-flex: 11;
          flex: 11;
}

.flex-col.is-12 {
  -webkit-box-flex: 12;
      -ms-flex: 12;
          flex: 12;
}

flexgrid.module.scss

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

@for $i from 1 through 6 {
    .flex-row.has-gap-#{$i} > * + * {
        margin-left: 5px * $i;
    }
  }

.flex-col {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

@for $i from 1 through 12 {
    .flex-col.is-#{$i} {
      flex: $i;
    }
  }

• use flex-row.has-gap-[1-6] for a gap between the column
• use flex-col.is-[1-12] to size the column width relatively to its sibling columns