Posted on Sep 10, 2020

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

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)); } }

JoelBonetR 🥇 • Sep 10 '20

dev.to/joelbonetr/building-a-flex-... :D

bronxsystem • Sep 21 '20

thank you