https://github.com/theopenwebjp/auto-grid

JavaScript API for simply adding and removing DOM elements to a fixed size element with automatic sizing using CSS3 grids.
https://github.com/theopenwebjp/auto-grid

css3-grids javascript

Last synced: about 23 hours ago
JSON representation

JavaScript API for simply adding and removing DOM elements to a fixed size element with automatic sizing using CSS3 grids.

• Host: GitHub
• URL: https://github.com/theopenwebjp/auto-grid
• Owner: theopenwebjp
• License: mit
• Created: 2018-02-20T14:17:27.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-07-23T07:52:43.000Z (over 1 year ago)
• Last Synced: 2024-09-18T09:46:55.626Z (2 months ago)
• Topics: css3-grids, javascript
• Language: JavaScript
• Homepage: https://theopenweb.info/app/auto-grid/
• Size: 43.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Description

JavaScript API for simply adding and removing DOM elements to a fixed size element with automatic sizing using CSS3 grids.

## Installation

`npm install @theopenweb/auto-grid`

## Usage

```javascript

// const AutoGrid = require('auto-grid'); // commonjs support removed. Use es6 imports.

import AutoGrid from 'auto-grid'

const autoGrid = new AutoGrid({

    wrapper: document.querySelector('#element-id')

});

//Adds empty element

autoGrid.addMock();

//Adds specified element

autoGrid.add(document.createElement('div'));

//Removes last element

autoGrid.remove();

//Removes specified element

autoGrid.remove(document.getElementById(('id')));

//Gets list of grid contents

autoGrid.list()

//Updates to specific array of elements

autoGrid.update([document.createElement('div'), document.createElement('div')])

```

## Problems

Currently has problems with fitting in elements if text is taking all space.

## Example

[./index.html](./index.html)

```bash

npx http-server ./

# http://localhost:8080

```