# ghost-grid > A tool for visualizing fluid grids during development. Latest version **0.1.0-alpha** (published 2015-09-30) · MIT license · 0 weekly downloads ## Install ```sh npm install ghost-grid pnpm add ghost-grid yarn add ghost-grid bun add ghost-grid ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.0-alpha | | Published | 2015-09-30 | | First published | 2015-09-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Reklino | | Maintainers | reklino | | Keywords | grid, guide, guides, ruler, baseline, layout | ## Links - npm: https://www.npmjs.com/package/ghost-grid - Repository: https://github.com/Reklino/blooby-grid - Issues: https://github.com/Reklino/blooby-grid/issues - npm.io page: https://npm.io/package/ghost-grid ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 0.1.0-alpha (latest) — 2015-09-30 ## README #Ghost Grid Summon your fluid grids from the bowels of CSS hell. [Read More here...](http://reklino.github.io/ghost-grid/demo/) ##What? Ghost Grid is a design/development tool for folks like me who love designing with code, but miss having a visual grid. ##Why? Designing in the browser is becoming more and more common, and so are fluid grid systems. My goal with this project was to create a simple way to visualize any fluid grid. ##Usage **Install** ``` bower install ghost-grid ``` ``` npm install ghost-grid --save-dev ``` or download `ghost-grid.min.js` and `ghost-grid.min.css` **Load** Load the css file into the head of your document like so ``` ``` Load the javascript file before your closing `` tag like so ``` ``` **Configure** ``` ``` ##Options Option | Default | Description --- | --- | --- containingElement | document.body | Ghost Grid will append all grid elements to the containingElement object. This option makes it easy to deploy Ghosts to individual layouts. It defaults to the body element. align | 'center' | Ghosts can be aligned `'left'`, `'center'`, or `'right'` in relation to their parent element. opacity | 0.75 | Determines the opacity of the Ghost. breaks | see below | Contains an array of break point objects. See next section below for details... ####Break Point Options Option | Default | Description --- | --- | --- point | false | CSS breakpoint at which to configure the grid to these settings (eg. `'(min-width: 300px)'`) containerWidth | false | The width of the container for your fluid grid (eg. `'600px'`) columns | 12 | The number of columns for this break point. gutters | 1/4 | The size of the gutters between each column. Gutters are relative to the size of columns. baseLineHeight | undefined | Determines the interval of the baseline grid. If undefined, there will be no baseline grid. ##Summon Once you've configured the grid, summon it from hell `ghost.summon();` ##Credits Inspired by the golden grid system and the configuration built into the sass plugin 'susy'. --- _Source: https://npm.io/package/ghost-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._