Responsive grid system based on Bootstrap for Svelte.
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
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>
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 |
Download stats for this NPM package
Svelte Grid Responsive is open source software licensed as MIT.