# Fluid / responsive

This hack allows you to use percentage-based widths for item elements for fluid / responsive layouts.

    var $container = $('#container')
    // initialize Isotope
    $container.isotope({
      // options...
      resizable: false, // disable normal resizing
      // set columnWidth to a percentage of container width
      masonry: { columnWidth: $container.width() / 5 }
    });

    // update columnWidth on window resize
    $(window).smartresize(function(){
      $container.isotope({
        // update columnWidth to a percentage of container width
        masonry: { columnWidth: $container.width() / 5 }
      });
    });

### Filters

- show all
- metal
- transition
- post-transition
- nonmetal
- inner-transition
- alkali and alkaline-earth
- not transition
- metal but not transition

### Sort

- original-order
- name
- symbol
- number
- weight
- category
- random

### Sort direction

- sort ascending
- sort descending

### Etc

- Toggle variable sizes
- Insert new elements
- Append new elements
- Shuffle

80

### Hg

## Mercury

200.59

52

### Te

## Tellurium

127.6

83

### Bi

## Bismuth

208.9804

48

### Cd

## Cadmium

112.411

20

### Ca

## Calcium

40.078

75

### Re

## Rhenium

186.207

81

### Tl

## Thallium

204.3833

51

### Sb

## Antimony

121.76

27

### Co

## Cobalt

58.933195

71

### Lu

## Lutetium

174.9668

18

### Ar

## Argon

39.948

37

### Rb

## Rubidium

85.4678

7

### N

## Nitrogen

14.0067

93

### Np

## Neptunium

(237)

89

### Ac

## Actinium

(227)