# ph-grid-layout

> ## install ``` npm install ph-grid-layout ```

Latest version **0.1.1-beta.0** (published 2021-09-19) · 0 weekly downloads

## Install

```sh
npm install ph-grid-layout
pnpm add ph-grid-layout
yarn add ph-grid-layout
bun add ph-grid-layout
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1-beta.0 |
| Published | 2021-09-19 |
| First published | 2021-08-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | phoeon |

## Links

- npm: https://www.npmjs.com/package/ph-grid-layout
- npm.io page: https://npm.io/package/ph-grid-layout

## Dependencies (1)

- [ph-autofit](https://npm.io/package/ph-autofit.md) *

## Recent versions

- 0.1.1-beta.0 (latest) — 2021-09-19
- 0.1.0 — 2021-08-30

## README

# vue-template

## install
```
npm install ph-grid-layout
```

### javascript
``` typescript
import { PhGrid, PhGridItem } from 'ph-grid-layout'

```

### template
``` html
<ph-grid :shadow="true" :border="true">
    <ph-grid-item style="height:200px" class="ph-primary">
    <img src="../assets/logo.png" alt="">
    </ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-success">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-warning">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-danger">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-info">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-danger">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-warning">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-success">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-primary">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-success">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-warning">你好</ph-grid-item>
</ph-grid>
```

### interface indtoduction
``` typescript
interface PhGrid{
    colGap:String,//列间距15px
    rowGap:String,//行间距15px
    radius:String,//item 圆角 4px
    padding:String,//item padding
    border:Boolean,//item border 启用 ，false
    shadow:Boolean,//item hover 阴影启用 false

    //不同分辨率下 的列数 
    all:Number,//所有分辨率 自适应 优先级高于其他
    xs:Number,//480->1
    sm:Number,//768->2
    md:Number,//992->3
    lg:Number,//1200->4
    xl:Number,//1920->6
}
interface PhGridItem{
    place:String // -> 参考css ：place-self 属性,
    colSpan:Number,//跨行
    rowSpan:Number //跨列
    colOffset:Number,//列偏移
    rowOffset:Number //行偏移
}
```
## [案例doc](https://phoeon.gitee.io/phoeon-ui-doc/#/grid)

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