Svelte Grid Responsive
Responsive grid system based on Bootstrap for Svelte.
Installation
npm i svelte-grid-responsive
// OR
yarn add svelte-grid-responsive
Note: to use this library in sapper, install as devDependency. See the link.
Demo Link
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:
<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
License
Svelte Grid Responsive is open source software licensed as MIT.