Licence
MIT
Version
0.0.1
Deps
3
Vulns
0
Weekly
0
ember-text-resize
HTML grid features to make life easier.
Installation
ember install ember-html-gridUsage
Replace div by html-grid component to manipulate rows and columns.
Columns Auto Height
Make columns get the same height on all screen sizes.
{{#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
Result on small screen
| 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
{{#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
Result on small screen