css - SASS for loop creating list item grid, having problems incrementing rows -

i'm trying create grid of list items, have 10 items , want position them absolutely in sets of 2. can set left position fine using modulus tripping on how can increment top position each row additional 20% top. can advise on need do? tried adding in row , top value counter think logic messed up. top values set 0, because im not setting $topvalue percentage or messing up?

sass

$total: 10; $inc: 0;      @for $i 1 through $total {         $rowcount: 0;         $topvalue: 0;         li:nth-child(#{$i}) {              top: $topvalue;              $rowcount: $rowcount + $rowcount;              @if $rowcount >= 2 {                 $rowcount: 0;                 $topvalue: $topvalue + 20;             }              @if $i % 2 == 0 {               left: 50%;             } @else {               left: 0;             }         }       } 

pen: http://codepen.io/styler/pen/iakzy sass: http://sassmeister.com/gist/a5ee97397eb2a0609ca1

$total: 10; $inc: 0; $rowcount: 0;  @for $i 1 through $total {   li:nth-child(#{$i}) {     @if $i % 2 == 0 {       left: 50%;     } @else {       $rowcount: $rowcount + 1;       left: 0;     }     top: ($rowcount - 1) * 20%;   } } 

fiddle: http://codepen.io/anon/pen/umojy