# x-grd

> Simple, Light-weight and Flexible Web Components for grid layout.

Latest version **1.1.0** (published 2020-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install x-grd
pnpm add x-grd
yarn add x-grd
bun add x-grd
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-08-08 |
| First published | 2019-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 50.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Shogo Sensui |
| Maintainers | 1000ch |

## Links

- npm: https://www.npmjs.com/package/x-grd
- Repository: https://github.com/1000ch/x-grd
- Issues: https://github.com/1000ch/x-grd/issues
- npm.io page: https://npm.io/package/x-grd

## Recent versions

- 1.1.0 (latest) — 2020-08-08
- 1.0.0 — 2020-01-15
- 0.4.0 — 2020-01-08
- 0.3.0 — 2020-01-03
- 0.2.0 — 2019-08-18
- 0.1.0 — 2019-08-18

## README

# x-grd [![Build Status](https://travis-ci.org/1000ch/x-grd.svg?branch=master)](https://travis-ci.org/1000ch/x-grd) [![devDependency Status](https://david-dm.org/1000ch/x-grd/dev-status.svg)](https://david-dm.org/1000ch/x-grd?type=dev)

> 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
<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>`.

```html
<x-grid align="stretch" justify="center">
  <x-cell width="fill"></x-cell>
  <x-cell width="2of12"></x-cell>
</x-cell>
```

## API

### `<x-grid align>` attribute

- `top`: Pull items to top
- `middle`: Pull items to middle
- `bottom`: Pull items to bottom
- `stretch`: Stretch items
- `baseline`: Pull items to baseline

### `<x-grid justify>` 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

### `<x-cell width>` 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)

---
_Source: https://npm.io/package/x-grd · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._