DEV Community

bronxsystem
bronxsystem

Posted on

creating own flexbox grid help

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

Alt Text

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



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

Top comments (4)

Collapse
 
bronxsystem profile image
bronxsystem • 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;
  }
}
Collapse
 
bronxsystem profile image
bronxsystem

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)); 
    }
}  
Collapse
 
joelbonetr profile image
JoelBonetR 🥇
Collapse
 
bronxsystem profile image
bronxsystem

thank you