# @fylgja/auto-grid

> A super small grid with auto flowing behavior based on the container size. Using a similar method to container queries

Latest version **1.1.3** (published 2023-02-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @fylgja/auto-grid
pnpm add @fylgja/auto-grid
yarn add @fylgja/auto-grid
bun add @fylgja/auto-grid
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-02-19 |
| First published | 2021-06-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 115 |
| Author | Fylgja |
| Maintainers | allrude, grimlink |
| Keywords | fylgja, fylgja component, grid, cssgrid |

## Links

- npm: https://www.npmjs.com/package/@fylgja/auto-grid
- Repository: https://github.com/fylgja/fylgja
- Homepage: https://fylgja.dev/
- Issues: https://github.com/fylgja/fylgja/issues
- npm.io page: https://npm.io/package/@fylgja/auto-grid

## Dependencies (1)

- [@fylgja/theme](https://npm.io/package/@fylgja/theme.md) ^1.2.0

## 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

- 1.1.3 (latest) — 2023-02-19
- 1.1.2 — 2022-11-05
- 1.1.1 — 2022-11-05
- 1.1.0 — 2022-07-24
- 1.0.4 — 2022-06-05
- 1.0.3 — 2022-02-04
- 1.0.2 — 2021-11-27
- 1.0.1 — 2021-06-22

## README

# Fylgja - Auto Grid

[![NPM version](https://img.shields.io/npm/v/@fylgja/auto-grid)](https://www.npmjs.org/package/@fylgja/auto-grid)
![license](https://img.shields.io/github/license/fylgja/fylgja)

A super small grid with auto flowing behavior, based on the container size.

Using a similar method to container queries.

This grid uses a minmax method,
it fills the grid items based on the space available.

Where the min value is static value and the max value is `1fr`.

It creates a grid without needing to setup any columns and rows,

since the grid items will do this for you, following the **content first** approach!

## Installation

```bash
npm install @fylgja/auto-grid
```

Then include the component in to your code via;

```scss
@use "@fylgja/auto-grid";
// Or via PostCSS import
@import "@fylgja/auto-grid";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/auto-grid" with ($auto-grid-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/auto-grid" layer("components");
```

## How to use

For more information see the [auto-grid docs on the Fylgja.dev](https://fylgja.dev/components/auto-grid/).

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