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

1. Installation
2. Usage
3. Theme | Styling
4. Properties
5. Changelog

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

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

Changelog

1.0.0 ( Major )

• Initial version of the grid view.