.js

const GRID_COLUMN_ATTRIBUTE = 'grid-columns';
const GRID_CHECK_DEBOUNCE_MS = 100;

const minItemWidth = Number(attrs.gridItemMin) || 100;
const maxItemWidth = Number(attrs.gridItemMax) || 100;

let onWidthChangeDebounced = $mdUtil.debounce(onWidthChanged, GRID_CHECK_DEBOUNCE_MS);

let $window = angular.element(window);
$window.on('resize', ev => onWidthChangeDebounced());

$interval(onWidthChangeDebounced, GRID_CHECK_DEBOUNCE_MS * 2);
onWidthChangeDebounced();
$timeout(() => element.addClass('items_state_loaded'), 200);

let oldParentWidth = 0;
function onWidthChanged() {
    let parentWidth = element.width();
    if (oldParentWidth === parentWidth) {
        return;
    }
    element.attr(GRID_COLUMN_ATTRIBUTE, getColumnsNumber());
}

function getColumnsNumber() {
    let parentWidth = oldParentWidth = element.width();
    let possibleColumns = Math.max(parseInt(parentWidth / maxItemWidth), 1);
    if (parentWidth / maxItemWidth > possibleColumns) {
        let nextWidth = parentWidth / (possibleColumns + 1);
        if (nextWidth >= minItemWidth && nextWidth <= maxItemWidth) {
            possibleColumns++;
        }
    }
    return possibleColumns;
}