JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<link rel="stylesheet" href="https://rawgit.com/ManifestWebDesign/angular-gridster/master/dist/angular-gridster.min.css">
<div ng-app="app" ng-controller="Ctrlr as c">
  <div class="row">
    <div class="col-md-5">
      <input class="form-control" ng-model="c.form.w" type="number" placeholder="Ширина(x200px)"/>
    </div>
    <div class="col-md-5">
      <input class="form-control" ng-model="c.form.h" type="number" placeholder="Высота(x200px)" />
    </div>
    <div class="col-md-2">
      <input class="form-control" ng-click="c.add()" type="button" value="Добавить" />
  </div>
  </div>
  <div class="container">
    <div gridster="c.options">
        <img gridster-item="item" ng-repeat="item in c.items" ng-attr-src="{{item.src}}"/>
    </div>
  </div>
</div>

CSS

.container {
    margin: auto;
    max-width: 1000px;
}
.gridster .gridster-item {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    color: #004756;
    background: #ffffff;
    padding: 10px;
}

JavaScript

const app = angular.module('app', ['gridster', 'ui.bootstrap']);
app.controller('Ctrlr', Page);
function Page() {
  this.options = {
    margins: [20, 20],
    outerMargin: false,
    pushing: true,
    floating: true,
    draggable: {
      enabled: true
    },
    resizable: {
      enabled: false,
      handles: []
    }
  };
  this.form = {w: 1, h: 1};
  this.items = [
    {sizeX: 2, sizeY: 1, row: 0, col: 0, src: 'https://placekitten.com/g/400/200'},
    {sizeX: 1, sizeY: 2, row: 1, col: 0, src: 'https://placekitten.com/g/200/400'},
    {sizeX: 1, sizeY: 1, row: 1, col: 1, src: 'https://placekitten.com/g/200/200'},
    {sizeX: 1, sizeY: 1, row: 2, col: 1, src: 'https://placekitten.com/g/200/200'},
  ];
  this.add = () => {
    this.items.push({
      sizeX: this.form.w,
      sizeY: this.form.h,
      row: 0,
      col: 0,
      src: `https://placekitten.com/g/${200*this.form.w}/${200*this.form.h}`
    });
  }
};