# ember-html-grid

> HTML grid features to make life easier.

Latest version **0.0.1** (published 2017-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-html-grid
pnpm add ember-html-grid
yarn add ember-html-grid
bun add ember-html-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2017-10-11 |
| First published | 2017-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ^4.5 \|\| 6.* \|\| >= 7.* |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bruno Salgado |
| Maintainers | brunosalgado1985 |
| Keywords | ember-addon, html grid, columns auto height, columns auto size |

## Links

- npm: https://www.npmjs.com/package/ember-html-grid
- Repository: https://github.com/BrunoSalgado1985/ember-html-grid
- Homepage: https://github.com/BrunoSalgado1985/ember-html-grid#readme
- Issues: https://github.com/BrunoSalgado1985/ember-html-grid/issues
- npm.io page: https://npm.io/package/ember-html-grid

## Dependencies (3)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^6.3.0
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^2.0.1
- [ember-cli-htmlbars-inline-precompile](https://npm.io/package/ember-cli-htmlbars-inline-precompile.md) ^0.4.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2017-10-11

## README

# ember-text-resize

HTML grid features to make life easier.

## Installation

```
ember install ember-html-grid
```

## Usage

Replace `div` by `html-grid` component to manipulate rows and columns.

### Columns Auto Height

Make columns get the same height on all screen sizes.

```hbs
{{#html-grid class="row" columns=".columns" columnsAutoHeight=true}}
	<div class="columns small-6 medium-3">
		One short line
	</div>
	<div class="columns small-6 medium-3">
		Line one<br>Line two<br>Line three
	</div>
	<div class="columns small-6 medium-3">
		Two lines<br>of description
	</div>
	<div class="columns small-6 medium-3">
		Just one line again
	</div>
{{/html-grid}}
```

_Result on medium or greater screen_  
![Columns Auto Height - Medium Screen](https://user-images.githubusercontent.com/17053893/31434904-3343f138-ae54-11e7-8499-8481495c1632.PNG)  
_Result on small screen_  
![Columns Auto Height - Small Screen](https://user-images.githubusercontent.com/17053893/31434905-33623094-ae54-11e7-9db2-27d3016bd7ec.PNG)

|Setting|Type|Description|
|-|-|-|
|`columns`|`string`|Selector for html columns elements.|
|`columnsAutoHeight`|`boolean` or `string`|Active columns auto height.|

##### columnsAutoHeight Options  
|Option|Description|
|-|-|
|`all`|Resize all columns based on the higher one. It's the same of `true` value.|
|`same-row`|Resize the columns based on the higher one on the same row.|

##### Same Row  
```hbs
{{#html-grid class="row" columns=".columns" columnsAutoHeight="same-row"}}
	<div class="columns small-6 medium-3">
		One short line
	</div>
	<div class="columns small-6 medium-3">
		Line one<br>Line two<br>Line three
	</div>
	<div class="columns small-6 medium-3">
		Two lines<br>of description
	</div>
	<div class="columns small-6 medium-3">
		Just one line again
	</div>
{{/html-grid}}
```

_Result on medium or greater screen_  
![Columns Auto Height - Medium Screen](https://user-images.githubusercontent.com/17053893/31434906-33829276-ae54-11e7-8805-1bf071c5e763.PNG)  
_Result on small screen_  
![Columns Auto Height - Small Screen](https://user-images.githubusercontent.com/17053893/31434907-33a0b80a-ae54-11e7-8278-d1e59d00290f.PNG)

---
_Source: https://npm.io/package/ember-html-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._