# Grid
### Table of contents
<ol>
  <li>
    <a href="#installation">Installation</a>
  </li>
  <li>
    <a href="#usage">Usage</a>
  </li>
  <li>
    <a href="#styling">Styling</a>
  </li>
  <li>
    <a href="#properties">Properties</a>
  </li>
</ol>

### Installation
#### NPM
```javascript
npm i @ppci/grid-view

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
```

### Usage
#### Javascript
```javascript
import '@ppci/grid-view'
```

#### Browser
```html
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/grid-view/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/grid-view/builds/legacy.min.js" />

<!-- Component -->
<grid-view
  rowSize=${String}
>
  <slot></slot>
</grid-view>
```

### Styling
```css
grid-view {
  --grid-columns: 4;
  --grid--column-width: 1f;

  /* Responsive */
  @media (max-width: 600px) {
     --grid-columns: 2;
  }
}
```

### Properties
<table width="100%">
  <thead>
    <tr>
      <td>Property</td>
      <td>Type</td>
      <td>Description</td>
      <td>Possible Values</td>
    </tr>
  </thead>
  <tr>
    <td>rowSize</td>
    <td>number</td>
    <td>Amount of columns on a row</td>
    <td>0,1,2,...N</td>
  </tr>
</table>