How to make a two column responsive row using SASS

  1. Let's create a file named _ncolumns.scss with this mixin inside
@mixin ncolumns($items_classname, $item_classname, $min-width, $gutter, $last-equal: false, $max-cols: 2) {
  .#{$items_classname} {
    display: flex;
    flex-wrap: wrap;
    margin-left: -$gutter;
    margin-top: -$gutter;

    .#{$item_classname} {
      flex: 1 0 $min-width;
      margin-left: $gutter;
      margin-top: $gutter;

      @if $last-equal {
        @for $i from 2 through $max-cols {
          $screen-width: ($min-width*$i)+($gutter*$i);
          $column-width: (100%/$i);
          @media (min-width: $screen-width) {
            max-width: calc(#{$column-width} - #{$gutter});

        $column-width: (100%/$max-cols);
        @media (min-width: $min-width*$max-cols) {
            min-width: calc(#{$column-width} - #{$gutter});

  1. For a html list like
<div class="items">
  <div class="item">Heriberto Nickel</div>
  <div class="item">Brittaney Haliburton</div>
  <div class="item">Maritza Winkler</div>
  <div class="item">Carmon Rigg</div>
  <div class="item">Alice Marmon</div>
  <div class="item">Lyman Steakley</div>
  <div class="item">Zenia Correa</div>

add the following code to the file main.scss

@import "ncolumns";

@include ncolumns('items', 'item', 200px,  10px, true, 2);

.items {
  .item {
    background: #e0ddd5;
    color: #171e42;
    box-sizing: border-box;
    padding: 10px;


The mixin comes from . See the demo here

I just did a little modification to pass the class names as variables.