Create beautiful grid with no gaps.

You can create responsive and fluid, unified or fixed layout with no gaps at all.

Responsive grid will be beautiful everywhere.

You can specify number of columns at any resolution

ff394bd2-a988-45b3-8d76-5981bb94edb3_3-responsive-color.png

Broad browser support.

All major browsers are supported including Internet Explorer. Send it to your best friends and your grandma. It’ll work on their computers and phones.

It’s gonna look good on all devices.

Develop with "mobile first" in mind. You can specify number of columns at specific resolution. Calculation algorithm is very fast.

Go top

Different layout modes.

You can choose one of the layout algorithm that fit your needs

1

Fixed Width

It's square size for tiles

2

Static Proportion

Specify static proportion (like 2x1 or 3x2) for all elements in the grid, they will stay with that size at all resolution

3

No gap

There is a few algorithm to close gaps in layout. You can choose one that fit your needs best.
EVERY TILE MUST HAVE "data-size=WxH" attribute

Go top

Features & Settings

There is some OPTIONS you can play with

Max Width & Height

You can specify maximum tile size:
- max_width_dimension (default 2)
- max_height_dimension (default 2)

Square Scale

That option allow proportional scale when resize happend. It's very fast cause all calculation cached and no need to be recalculated:
- squarescale (default false)

Gap Markup & Background

Set markup or background color for every gap that added to layout:
- gap_markup (default "")
- gap_backgound (default "#343434")

Gap Class

Specify class name for all gaps:
- gap_classname (default "gap")

Different Algorithm

There are a few algorithm for solve layout. You can choose static proportion, fit layout size insequense, move last tile to close gap.

Response

onResize ( cellwidth, columns )
onLayoutChanged ( tiles, columns )

Go top

DOWNLOAD

GITHUB

LICENSE

NGT (No Gaps Tiles) MIT license.

Go top