[Tiles with bottom borders of varying number of columns] #d8 #twig

1.twig

{% set quantity = tiles|length %}
{% set attributes = {
  class: [
    'tiles'
  ],
  'data-quantity': quantity,
  'data-layout': num_cols,
  'data-modulo-2': quantity % 2,
  'data-modulo-3': quantity % 3,
  'data-modulo-4': quantity % 4,
} %}


<div {{ create_attribute(attributes) }}>
  {% for tile in tiles %}
    <div class="tile">
      {{ tile }}
    </div>
  {% endfor %}
</div>

2.scss

@mixin twocol {
  .tile {
    flex: 0 0 50%;
    max-width: 50%;
    border-right: 1px solid #d1cdcb;

    &:last-child,
    &:nth-child(2n) {
      border-right-width: 0;
    }
  }

  &[data-modulo-2='1'] {
    .tile {
      &:last-child {
        margin-left: 25%;
      }
    }
  }

  &[data-modulo-2='0'] {
    .tile {
      &:last-child,
      &:nth-last-child(2) {
        border-bottom-width: 0;
      }
    }
  }
}

@mixin threecol {
  .tile {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    border-right: 1px solid #d1cdcb;

    &:last-child,
    &:nth-child(3n) {
      border-right-width: 0;
    }
  }

  &[data-modulo-3='1'] {
    .tile {
      &:last-child {
        margin-left: 33.33333%;
      }
    }
  }

  &[data-modulo-3='2'] {
    .tile {
      &:last-child,
      &:nth-last-child(2) {
        border-bottom-width: 0;
      }

      &:nth-last-child(2) {
        margin-left: 16.66665%;
      }
    }
  }

  &[data-modulo-3='0'] {
    .tile {
      &:last-child,
      &:nth-last-child(2),
      &:nth-last-child(3) {
        border-bottom-width: 0;
      }
    }
  }
}

@mixin fourcol {
  .tile {
    flex: 0 0 25%;
    max-width: 25%;
    border-right: 1px solid #d1cdcb;

    &:last-child,
    &:nth-child(4n) {
      border-right-width: 0;
    }
  }

  &[data-modulo-4='1'] {
    .tile {
      &:last-child {
        margin-left: 37.5%;
      }
    }
  }

  &[data-modulo-4='2'] {
    .tile {
      &:last-child,
      &:nth-last-child(2) {
        border-bottom-width: 0;
      }

      &:nth-last-child(2) {
        margin-left: 25%;
      }
    }
  }

  &[data-modulo-4='3'] {
    .tile {
      &:last-child,
      &:nth-last-child(2),
      &:nth-last-child(3) {
        border-bottom-width: 0;
      }

      &:nth-last-child(3) {
        margin-left: 12.5%;
      }
    }
  }

  &[data-modulo-4='0'] {
    .tile {
      &:last-child,
      &:nth-last-child(2),
      &:nth-last-child(3),
      &:nth-last-child(4) {
        border-bottom-width: 0;
      }
    }
  }
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;

  .tile {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    align-items: stretch;
    min-height: 13.889rem;
    border-bottom: 1px solid #d1cdcb;

    &:last-child {
      border-bottom-width: 0;
    }
  }

  &[data-layout='2'] {
    @include media-breakpoint-up(sm) {
      @include twocol;
    }
  }

  &[data-layout='3'] {
    @include media-breakpoint-only(sm) {
      @include twocol;
    }

    @include media-breakpoint-up(md) {
      @include threecol;
    }
  }

  &[data-layout='4'] {
    @include media-breakpoint-only(sm) {
      @include twocol;
    }

    @include media-breakpoint-only(md) {
      @include threecol;
    }

    @include media-breakpoint-up(lg) {
      @include fourcol;
    }
  }
}