sass

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: (10
Etiquetas