BoBeOp

BoBeOp.markdown

BoBeOp

A Pen by Ryan Chen on CodePen.

License.

index.html

<div class="parent" ng-app="MyApp">
  <div class="container" ng-controller="MyCtrl">
    <div class="item" ng-repeat="item in items">{{item.name}}</div>
    
    <div class="item placeholder" ng-repeat="item in items"></div>
    
    <div class="item placeholder" ng-repeat="item in items"></div>
    
    <div class="item placeholder" ng-repeat="item in items"></div>
  </div>
</div>

script.js

var app = angular.module('MyApp', []);

app.controller('MyCtrl', ['$scope', function ($scope) {
  
  var i;
  $scope.items = [];
  
  for ( i = 0; i < 18; i++) {
    $scope.items[i] = {
      name: i
    };
  }
    
}]);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

.parent {
  width: 200px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid #A6A6A6;
  padding: 5px;
  padding-bottom: 0;
}

.item {
  border: 1px solid #A6A6A6;
  border-radius: 3px;
  width: 30px;
  height: 20px;
  text-align: center;
  margin-bottom: 5px;
}

.placeholder {
  visibility: hidden;
  height: 0;
  padding: 0;
  margin: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}