# svelte-grid-responsive

> Responsive grid system based on Bootstrap for Svelte

Latest version **1.2.4** (published 2022-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-grid-responsive
pnpm add svelte-grid-responsive
yarn add svelte-grid-responsive
bun add svelte-grid-responsive
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2022-04-06 |
| First published | 2020-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 44.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 58 |
| Author | André Lins |
| Maintainers | andrelmlins |
| Keywords | svelte, grid, responsive, bootstrap |

## Links

- npm: https://www.npmjs.com/package/svelte-grid-responsive
- Repository: https://github.com/andrelmlins/svelte-grid-responsive
- Homepage: https://svelte-grid-responsive.netlify.com/
- Issues: https://github.com/andrelmlins/svelte-grid-responsive/issues
- npm.io page: https://npm.io/package/svelte-grid-responsive

## 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.2.4 (latest) — 2022-04-06
- 1.2.3 — 2022-04-06
- 1.2.2 — 2022-01-18
- 1.2.1 — 2021-10-12
- 1.2.0 — 2021-08-25
- 1.1.0 — 2021-08-22
- 1.0.0 — 2021-08-11
- 0.3.0 — 2020-04-20
- 0.2.0 — 2020-04-19
- 0.1.1 — 2020-04-19
- 0.1.0 — 2020-04-19

## README

# Svelte Grid Responsive

[![npm version](https://badge.fury.io/js/svelte-grid-responsive.svg)](https://www.npmjs.com/package/svelte-grid-responsive) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/svelte-grid-responsive/blob/master/LICENSE) • [![Build Status](https://travis-ci.com/andrelmlins/svelte-grid-responsive.svg?branch=master)](https://travis-ci.com/andrelmlins/svelte-grid-responsive) • [![Netlify Status](https://api.netlify.com/api/v1/badges/5697d9ca-6dcc-4839-99d1-fd0aca0e852c/deploy-status)](https://app.netlify.com/sites/svelte-grid-responsive/deploys)

Responsive grid system based on Bootstrap for Svelte.

## Installation

```
npm i svelte-grid-responsive
// OR
yarn add svelte-grid-responsive
```

<em>Note: to use this library in sapper, install as devDependency. See the [link](https://github.com/sveltejs/sapper-template#using-external-components).</em>

## Demo [Link](https://svelte-grid-responsive.netlify.com/)

Local demo:

```
git clone https://github.com/andrelmlins/svelte-grid-responsive.git
cd svelte-grid-responsive
npm install && npm run dev
```

## Examples

An example of how to use the library:

```js
<script>
  import Grid from "svelte-grid-responsive";
</script>

<Grid container gutter={12}>
  <Grid xs={12} md={4} lg={3}>
    xs=12 md=4 lg=3
  </Grid>
  <Grid xs={12} md={4} lg={3}>
    xs=12 md=4 lg=3
  </Grid>
  <Grid xs={12} md={4} lg={3}>
    xs=12 md=4 lg=3
  </Grid>
  <Grid xs={12} md={4} lg={3}>
    xs=12 md=4 lg=3
  </Grid>
</Grid>
```

## Properties

Component props:

| Prop      | Default | Type   | Description                             |
| --------- | ------- | ------ | --------------------------------------- |
| container | false   | bool   | Defines whether the grid is a container |
| gutter    | null    | number | Grid spacing in the container           |
| columns   | 12      | number | Setting columns count in the container  |
| order     | null    | number | Order the columns                       |
| xs        | null    | number | Size in extra small screen              |
| sm        | null    | number | Size in small screen                    |
| md        | null    | number | Size in medium screen                   |
| lg        | null    | number | Size in large screen                    |
| xl        | null    | number | Size in extra large screen              |
| xsOffset  | null    | number | Offset in extra small screen            |
| smOffset  | null    | number | Offset in small screen                  |
| mdOffset  | null    | number | Offset in medium screen                 |
| lgOffset  | null    | number | Offset in large screen                  |
| xlOffset  | null    | number | Offset in extra large screen            |

## NPM Statistics

Download stats for this NPM package

[![NPM](https://nodei.co/npm/svelte-grid-responsive.png)](https://nodei.co/npm/svelte-grid-responsive/)

## License

Svelte Grid Responsive is open source software [licensed as MIT](https://github.com/andrelmlins/svelte-grid-responsive/blob/master/LICENSE).

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