Fluid Grid is AngularJS directive that create responsive grid layout for you.
http://bapairaew.github.io/ng-fluid-grid
<fluid-grid block-min-width="400" block-min-height="100" block-vertical-margin="1" block-horizontal-margin="1">
<fluid-grid-block>
Grid #1
</fluid-grid-block>
<fluid-grid-block>
Grid #2
</fluid-grid-block>
<fluid-grid-block>
Grid #3
</fluid-grid-block>
</fluid-grid>
This will result grid with 3 blocks (cells) which fit your entire screen.
block-min-width: Minimum width in pixel of each block.
block-min-height: Minimum height in pixel of each block.
block-vertical-margin: Reduce the width by given number in pixel.
block-horizontal-margin: Reduce the width by given number in pixel.
- In case of the blocks reaches minimum height, they will overflow at the bottom of the container.
- If you have to put border in your block, the
block-vertical-marginandblock-horizontal-marginwill come in handy. They will reduce the block's size so that the border will not ruin the grid's layout.