@powerpeers-test/grid-view v0.0.0

Grid

This is a simple css grid view. The grid is build upon CSS Grid Layout Module. Therefore, you are able to apply CSS Grid layout functionalities to your own 'grid content'.

Table of contents

Installation

CDN

  <script src="http://developer.powerpeers.com/social/1.0.0/grid-view.js" />

NPM

  npm i @ppci/grid-view

Usage

You can place everything you want in the grid. Every direct child is placed in its own separate column.

// Javascript import
import '@ppci/grid-view'
// Module import
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/grid-view.js" />

<grid-view rowSize="4">
  <div> Grid Item 1 </div>
  <div> Grid Item 2 </div>
  <div> Grid Item 3 </div>
</grid-view>

Theme | Styling

Available css variables

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

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

Properties

Changelog

1.0.0 ( Major )

• Initial version of the grid view.