JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<script src="https://raw.github.com/tiqtech/enyo-extras/master/source/layout/grid.js"></script>

CSS

.list-item {
    height:100px;
    width:100px;
    padding:5px;
}

.extras-grid:not(.enyo-list), .extras-grid .enyo-list-page {
    position:relative;
}

.extras-grid .enyo-list-page > *, .extras-grid:not(.enyo-list) > * {
    position:absolute;
    -webkit-transition:all 250ms ease-out;
    -moz-transition:all 250ms ease-out;
    -o-transition:all 250ms ease-out;
    -ms-transition:all 250ms ease-out;
    transition:all 250ms ease-out;
}

JavaScript

enyo.kind({
    name:"extras.ListGridLayout",
    kind:"extras.GridLayout"
});

enyo.kind({
    name:"ex.App",
    kind:"FittableRows",
    components:[
        {kind:"onyx.Toolbar", components:[
            {content:"GridLayout on List"}
        ]},
        {kind:"List", count:500, fit:true, layoutKind:"extras.ListGridLayout", components:[
            {classes:"list-item", components:[
                {content:"first item"},
                {content:"second item"}
            ]}
        ]}
    ]
});

new ex.App().renderInto(document.body);