@ppci/grid-view

Html grid

Usage no npm install needed!

<script type="module">
  import ppciGridView from 'https://cdn.skypack.dev/@ppci/grid-view';
</script>

README

Grid

Table of contents

  1. Installation
  2. Usage
  3. Styling
  4. Properties

Installation

NPM

npm i @ppci/grid-view

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

Usage

Javascript

import '@ppci/grid-view'

Browser

<!-- 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

grid-view {
  --grid-columns: 4;
  --grid--column-width: 1f;

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

Properties

Property Type Description Possible Values
rowSize number Amount of columns on a row 0,1,2,...N