Ember-html-grid NPM

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
Columns Auto Height - Medium Screen
Result on small screen
Columns Auto Height - 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
Columns Auto Height - Medium Screen
Result on small screen
Columns Auto Height - Small Screen

ember-addon html grid columns auto height columns auto size

ember-cli-babel ember-cli-htmlbars ember-cli-htmlbars-inline-precompile

@infinitebrahmanuniverse/nolb-ember-h @everything-registry/sub-chunk-1577

0.0.1

7 years ago