creating own flexbox grid help

#css #webdev

trying to create own flexbox grid but for some reason cant get the sizes right.

    $class: "span";

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

  }

looks like this

i need to add margins but its not letting me use this.



         flex-basis: calc(((#{$i}/12 * 100%) + (#{$i} * 20px)));

Top comments (4)

bronxsystem • Sep 21 '20 • Edited

Thought I should update this post I ended up deleting everything because was having issues with alignment and sizing.

I used grid. I wrote this for a developer test if they happen to see this know I did not copy this code I wrote it ( :

$class: "btn";

// for different btn spans change class name to btn-x where x is desired span (:

@for $i from 1 through 12 {
  .#{$class}-#{$i} {
    grid-column: span #{$i};
  }
}

$class: "calc__basic";

.#{$class} {
  padding: 20px;
  background: $black;
  display: grid;
  grid-template-columns: repeat(4, minmax(60px, 60px));
  grid-gap: 10px;
  grid-auto-rows: 60px;

  &--flex-end {
    justify-content: flex-end;
  }
}

bronxsystem • Sep 10 '20

fixed



        $class: "span";
        .#{$class}-1{
            flex-basis: calc(1/12 * 100%);
        }
  @for $i from 2 through 12{
    .#{$class}-#{$i}{
             flex-basis: calc(#{$i}/12 * 100% + (#{$i} * 20px)); 
    }
}