# fluid-grid

> Fluid Grid css

Latest version **0.0.2** (published 2022-02-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install fluid-grid
pnpm add fluid-grid
yarn add fluid-grid
bun add fluid-grid
```

Provides the command `fluid-grid`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-02-08 |
| First published | 2022-02-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 64.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Tomas Rezac |
| Maintainers | rezi99 |
| Keywords | grid, css |

## Links

- npm: https://www.npmjs.com/package/fluid-grid
- npm.io page: https://npm.io/package/fluid-grid

## Dependencies (5)

- [zx](https://npm.io/package/zx.md) ^4.2.0
- [sass](https://npm.io/package/sass.md) ^1.47.0
- [which](https://npm.io/package/which.md) ^2.0.2
- [cssnano](https://npm.io/package/cssnano.md) ^5.0.15
- [postcss](https://npm.io/package/postcss.md) ^8.4.5

## 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.0.2 (latest) — 2022-02-08
- 0.0.1 — 2022-02-07

## README

# Fluid Grid

CSS grid system we have been waiting for

Check examples and **documentation** at [fluid-grid.com](https://fluid-grid.com)

- Component ready

  - Same component in differently sized container behave similarly

- Container-query based

  - Component's grid depend on components size itself, not on window width

- Content driven

  - Just define optimal grid cell size. Then tell how many cells your content requires. Rest is done automatically.

- Declarative
  - Basic scenarios can be handled by minimal rules `.f-col`. No more `w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4`

## Install

Go to directory where you want to generate a fluid-grid.css

Then run a fluid grid wizard with:

```
$: npx fluid-grid
```

Add following polyfill to enable @container queries in browsers which don't support it (There is zero zupport right now)
Beware that the polyfill has some limitations; you can only use px as units for cell definition. See more [here](https://github.com/GoogleChromeLabs/container-query-polyfill)

```
const supportsContainerQueries = 'container' in document.documentElement.style;

if (!supportsContainerQueries) {
	import('https://cdn.skypack.dev/container-query-polyfill');
}
```

---
_Source: https://npm.io/package/fluid-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._