Example Drop Grid

components.x-grid.js

import Component from '@ember/component';
import { classNames } from '@ember-decorators/component';

@classNames('grid')
export default class extends Component { 
  didInsertElement() {
    this.element.innerHTML += Array(1600).join('<div></div>') 
  }
}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.grid {
  border-radius: 0px;
  border: 1px solid black;
  display: grid;
  grid-template-rows: repeat(40, 10px);
  grid-template-columns: repeat(40, 10px);
	grid-column-gap: 1px;
  grid-row-gap: 1px;
  background-color: #eee;
}

.grid > * {
  background-color: white; 
}

.grid-item {
  grid-column-start: 1;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 10;
}

.item-container {
  width: 300px;
  height: 300px;
  border-radius: 5px;
  border: 3px dashed #999;
}

.item {
  width: 100px;
  height: 100px;
  background-color: hsl(0, 40%, 50%);
  border: 2px solid black;
}

templates.application.hbs

<div class="center">
	<h2>
  	Grid
  </h2>
  {{x-grid}}
  <br>
  <h4>
  	Take something from below and drag it into the grid above
  </h4>
  <div class="item-container center">
    <div class="item">      
    </div>
  </div>
</div>

templates.components.x-grid.hbs

{{yield}}
<div></div>
<div></div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-decorators": "2.0.0"
  }
}