https://github.com/1000ch/x-grd
Simple, Light-weight and Flexible Web Components for grid layout.
https://github.com/1000ch/x-grd
grid grid-layout layout web-components
Last synced: about 2 months ago
JSON representation
Simple, Light-weight and Flexible Web Components for grid layout.
- Host: GitHub
- URL: https://github.com/1000ch/x-grd
- Owner: 1000ch
- License: mit
- Created: 2019-08-18T12:08:50.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2023-03-04T04:32:28.000Z (over 3 years ago)
- Last Synced: 2025-10-02T05:28:25.881Z (9 months ago)
- Topics: grid, grid-layout, layout, web-components
- Language: TypeScript
- Homepage: https://1000ch.github.io/x-grd/
- Size: 1.18 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# x-grd 
> 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
import { XGrid, XCell } from 'https://unpkg.com/x-grd';
customElements.define('x-grid', XGrid);
customElements.define('x-cell', XCell);
```
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)