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