Star Follow @1000ch
GitHub # x-grd ![GitHub Actions Status](https://github.com/1000ch/x-grd/workflows/test/badge.svg) Simple, Light-weight and Flexible Web Components for grid layout. ## Install Using [npm](https://www.npmjs.org/package/x-grd): ```sh $ npm install x-grd ``` ## Usage Import `XGrid` and `XCell`, register them. ```html ``` Put `` and ``. ```html ``` ## API ### `` attribute - `top`: Pull items to top - `middle`: Pull items to middle - `bottom`: Pull items to bottom - `stretch`: Stretch items - `baseline`: Pull items to baseline ### `` attribute - `start`: Layout items to start - `center`: Layout items to center - `end`: Layout items to end - `between` Add spaces between items - `around`: Add spaces around items ### `` attribute - `fill`: Set item width to left - `1of12`: 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% ## License [MIT](https://1000ch.mit-license.org) © [Shogo Sensui](https://github.com/1000ch)