JSFiddle - React, Tailwind, and code Playground

by cCarlson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body ng-app="app">
    <div class="container-fluid" ng-controller="GridCtrl">
        
        <hr />
        4-Columns
        <div class="row" ng-repeat="row in lists | matrical:4">
            <span class="col col-md-4" ng-repeat="list in row">{{list.name}}</span>
        </div>
        <hr />
        3-Columns
        <div class="row" ng-repeat="row in lists | matrical:3">
            <span class="col col-md-4" ng-repeat="list in row">{{list.name}}</span>
        </div>
        <hr />
        2-Columns
        <div class="row" ng-repeat="row in lists | matrical:2">
            <span class="col col-md-4" ng-repeat="list in row">{{list.name}}</span>
        </div>
        <hr />
        Extraneous
        <div class="row" ng-repeat="row in lists | matrical:1">
            <span class="col col-md-4" ng-repeat="list in row">{{list.name}}</span>
        </div>
        
    </div>
</body>

JavaScript

var app = angular.module('app', []).filter('matrical', function(){
	
    function listToMatrix(list, n) {
        var grid = [], i = 0, x = list.length, col, row = -1;
        for (i = 0; i < x; i++) {
            col = i % n;
            if (col === 0) {
                grid[++row] = [];
            }
            grid[row][col] = list[i];
        }
        return grid;
    }
    
    return function apply(list, columns) {
    	return listToMatrix(list, columns);
    };
}).controller('GridCtrl', function GridCtrl($scope){
    console.clear();
	var lists = [
        { name: 'One' },
        { name: 'Two' },
        { name: 'Three' },
        { name: 'Four' },
        { name: 'Five' },
        { name: 'Six' },
        { name: 'Seven' },
        { name: 'Eight' },
        { name: 'Nine' },
        { name: 'Ten' },
        { name: 'Eleven' },
        { name: 'Twelve' },
        { name: 'Thirteen' },
    ];
    $scope.lists = lists;
    $scope.grid = [];

});