zGrid

Installation

Step by step install the plugin.

Install with npm

npm install zgrid --save
		

or

Install with yarn

yarn add zgrid
		

or

Manual install

Download the most recent version from Github and include the unzipped files in your project. Use the top link on this page.

How to use

Some examples to help you dig faster ;).

It's easy

All what you need is to wrap some elements in a div which has at least one class that contains zg subset.

It's really flexible

Look at the following example. You decide what the columns do. They can change to any size depending on different screen sizes.

Hide or show

In this example you'll notice 3 colored cells that will hide or show when the screen size is changed.

Horizontal align

Use ?-start, ?-center or ?-end to align the columns horizontally.

Vertical align

Use ?-top, ?-middle or ?-bottom to align the columns vertically.

Individual vertical align

Use ?-top, ?-middle or ?-bottom to align the individual columns vertically.

Horizontal direction

Columns direction can be set from left to right(default) -row or from right to left -row-reverse

... use -row to restore it back to normal direction.

Spacing around

Use ?-space-around to distribute items evenly. Items have a half-size space on either end.

Spacing between

Use ?-space-between to distribute items evenly. The first item is flush with the start, the last is flush with the end.

Min gutter

Keep the space between columns at the minimum. Use -min-gutter

Max gutter

Keep the space between columns at the maximum. Use -max-gutter

No gutter

Remove the space between columns. Use -no-gutter to remove the space between columns

... and -gutter to restore it back.

Vertical gutter

The horizontal is nice and a needed one, but wouldn't it be awesome to have the possibility of adding on top and bottom of each column. Use the same classes but with the prefix -v

Nested grids

No problems. Go deeper and don't worry about content. It will fit correctly even if there are 10 nested grids.

<div class="zg">

	<div class="cell-xs-6">
		<div class="zg">
			<div class="cell-xs-6">

				<div class="zg">
					<div class="cell-xs-6"> ...... </div>
					<div class="cell-xs-6"> ...... </div>
				</div>

			</div>
			<div class="cell-xs-6">

				<div class="zg">
					<div class="cell-xs-6"> ...... </div>
					<div class="cell-xs-6"> ...... </div>
				</div>

			</div>
		</div>
	</div>

	<div class="cell-xs-6">
		<div class="zg">
			<div class="cell-xs-8"> ...... </div>
			<div class="cell-xs-4"> ...... </div>
			<div class="cell-xs-4"> ...... </div>
			<div class="cell-xs-8"> ...... </div>
		</div>
	</div>

</div>

Fixed number of columns

Sometimes you just want to set a number of columns and forget about it. You can do it.

Set one of the following class suffixes to grid container and only cell class to inner elements:

-6columns, -5columns, -4columns, -3columns, -2columns, -1column

Vertical direction

It's possible to display the columns in a vertical direction.

Vertical distribution

Use -space-between, -space-around, -start, -center, -end just like you would do in horizontal mode.