DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 Author • Edited on

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 Author

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 Author

thank you

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›