README
Simple, Light-weight and Flexible Web Components for grid layout.
Install
Using npm:
$ npm install x-grd
Usage
Import XGrid
and XCell
, register them.
<script type="module">
import { XGrid, XCell } from 'https://unpkg.com/x-grd';
customElements.define('x-grid', XGrid);
customElements.define('x-cell', XCell);
</script>
Put <x-grid>
and <x-cell>
.
<x-grid align="stretch" justify="center">
<x-cell width="fill"></x-cell>
<x-cell width="2of12"></x-cell>
</x-cell>
API
attribute <x-grid align>
top
: Pull items to topmiddle
: Pull items to middlebottom
: Pull items to bottomstretch
: Stretch itemsbaseline
: Pull items to baseline
attribute <x-grid justify>
start
: Layout items to startcenter
: Layout items to centerend
: Layout items to endbetween
Add spaces between itemsaround
: Add spaces around items
attribute <x-cell width>
fill
: Set item width to left1of12
: Set item width to 8.3%2of12
: Set item width to 16.7%3of12
: Set item width to 25%4of12
: Set item width to 33%5of12
: Set item width to 41.7%6of12
: Set item width to 50%7of12
: Set item width to 58.3%8of12
: Set item width to 66.7%9of12
: Set item width to 75%10of12
: Set item width to 83.3%11of12
: Set item width to 91.7%12of12
: Set item width to 100%