.root{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

.container{
}

.column, .placeholder{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  list-style: none;
  .root &{
    list-style: none;
  }
}

.column-auto{
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0%;
}

.column-full{
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100%;
}

.column-fit{
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}


@for $i from 1 to 12 {
  .column-$i {
    flex-basis: calc(100 / 12 * $i)%;
  }
}