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.