JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/enyojs/layout/master/list/source/Selection.js"></script>
<script src="https://raw.github.com/enyojs/layout/master/list/source/FlyweightRepeater.js"></script>

CSS

.extras-grid .extras-grid-client {
    position:relative;
}

.extras-grid .extras-grid-client > * {
    position:absolute;
    -webkit-transition:all 250ms ease-out;
}

JavaScript

/* importing enyo.Selection and enyo.FlyweightRepeater in resources */

enyo.kind({
    name: "extras.Grid",
    kind: "Control",
    classes: "extras-grid",
    published: {
        cellHeight: 200,
        cellWidth: 150,
        margin: 0,
        collapsed: false,
        align: "left",
        cells:0
    },
    events:{
        onSetupCell:"",
    },
    components:[
        {name:"client", kind:"FlyweightRepeater", classes:"extras-grid-client", onSetupItem:"setupRow"}
    ],
    create:function() {
        this.inherited(arguments);
        this.cellsChanged();
    },
    setupRow:function(sender, event) {
        this.doSetupCell(event);
    },
    cellsChanged:function() {
        this.$.client.setCount(this.cells);
        this.hasNode() && this.positionControls();
    },
    rendered: function() {
        this.inherited(arguments);
        this.positionControls();
    },
    // iterates children and repositions them
    positionControls: function() {
        if (this.cells <= 0) return;

        var m2 = this.margin * 2,
            d = this.getDimensions(),
            colsPerRow = Math.floor(d.width / (m2 + this.cellWidth)) || 1;

        for (var i = 0; i < this.cells; i++) {
           
            this.positionControl(this.$.client.fetchRowNode(i), i, colsPerRow);
        }

        var h = Math.floor(this.cells / colsPerRow) * (m2 + this.cellHeight);
        this.autoHeight && this.applyStyle("height", h + "px");
    },
    // does the position calculation for a control and applies the style
    positionControl: function(control, index, colsPerRow) {
        var m2 = this.margin * 2,
            top = (this.collapsed) ? 0 : Math.floor(index / colsPerRow) * (m2 + this.cellHeight),
            left = (this.collapsed) ? this.alignmentMargin : (index % colsPerRow) * (m2 + this.cellWidth) + this.alignmentMargin;

        // hack ...
        control.style.cssText = enyo.Control.domStylesToCssText({
            "top":top + "px",
            "left":left...