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.

{{#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