#thegrid {
   .test {
       color: red;
   }
   .test-row{
       display: grid;
       grid-template-columns: repeat(12, 1fr);
           max-width: 1200px;
   }
   .test-column, .test-columns{
       padding: 0 1rem;
   }

   // Sizes-list-media
   $sizes-list: (
       "small": ("(min-width: 320px) and (max-width: 640px)"),
       "medium": ("(min-width: 640px) and (max-width: 1024px)"),
       "large": ("(min-width: 1024px)")
   );

   $columns-list: 1 2 3 4 5 6 7 8 9 10 11 12;

   @each $current-column in $columns-list {
       $i: index($columns-list, $current-column);
       $sizes: map-keys($sizes-list);
       @each $size in $sizes {
           $thekey: map-get($sizes-list, $size);
           @media #{$thekey} {
               .test-#{$size}-#{$i} {
                   grid-column: span #{$i};
               }
           }
       }
   }
}