Home

Awesome

Svelte Grid Responsive

npm versionLicense: MITBuild StatusNetlify Status

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.</em>

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:

PropDefaultTypeDescription
containerfalseboolDefines whether the grid is a container
gutternullnumberGrid spacing in the container
columns12numberSetting columns count in the container
ordernullnumberOrder the columns
xsnullnumberSize in extra small screen
smnullnumberSize in small screen
mdnullnumberSize in medium screen
lgnullnumberSize in large screen
xlnullnumberSize in extra large screen
xsOffsetnullnumberOffset in extra small screen
smOffsetnullnumberOffset in small screen
mdOffsetnullnumberOffset in medium screen
lgOffsetnullnumberOffset in large screen
xlOffsetnullnumberOffset in extra large screen

NPM Statistics

Download stats for this NPM package

NPM

License

Svelte Grid Responsive is open source software licensed as MIT.