Svelte Grid Responsive

Responsive grid system based on Bootstrap for Svelte

Without define sizes

col

    
      
  <script>
    import Grid from 'svelte-grid-responsive';
  </script>
  
  <Grid container gutter={12}>
    <Grid>col</Grid>
    <Grid>col</Grid>
    <Grid>col</Grid>
  </Grid>
  <Grid container gutter={12}>
    <Grid>col</Grid>
    <Grid>col</Grid>
    <Grid>col</Grid>
    <Grid>col</Grid>
    <Grid>col</Grid>
  </Grid>

Specifying sizes

xs=12 md=4 lg=3

xs=12 lg=6

lg=4

    
      
  <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 xs={12} lg={6}>xs=12 lg=6</Grid>
    <Grid xs={12} lg={6}>xs=12 lg=6</Grid>
    <Grid lg={4}>lg=4</Grid>
    <Grid lg={4}>lg=4</Grid>
    <Grid lg={4}>lg=4</Grid>
  </Grid>

Setting columns count

xs=10 md=5 lg=2

xs=10 lg=3

xs=10 lg=4

xs=10 lg=3

    
      
  <script>
    import Grid from 'svelte-grid-responsive';
  </script>
      
  <Grid container gutter={12} columns={10}>
    <Grid xs={10} md={5} lg={2}>xs=10 md=5 lg=2</Grid>
    <Grid xs={10} md={5} lg={2}>xs=10 md=5 lg=2</Grid>
    <Grid xs={10} md={5} lg={2}>xs=10 md=5 lg=2</Grid>
    <Grid xs={10} md={5} lg={2}>xs=10 md=5 lg=2</Grid>
    <Grid xs={10} md={5} lg={2}>xs=10 md=5 lg=2</Grid>
    <Grid xs={10} lg={3}>xs=10 lg=3</Grid>
    <Grid xs={10} lg={4}>xs=10 lg=4</Grid>
    <Grid xs={10} lg={3}>xs=10 lg=3</Grid>
  </Grid>

Column ordering

First, but second

Second, but last

Third, but unordered

    
      
  <script>
    import Grid from 'svelte-grid-responsive';
  </script>
        
  <Grid container gutter={12}>
    <Grid xs={12} lg={4} order={2}>First, but second</Grid>
    <Grid xs={12} lg={4} order={3}>Second, but last</Grid>
    <Grid xs={12} lg={4}>Third, but unordered</Grid>
  </Grid>

Changing gutter

xs=12 md=4 lg=3

    
      
  <script>
    import Grid from 'svelte-grid-responsive';
  </script>
          
  <Grid container gutter={50}>
    <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>

Offset

xs=12 md=4 lg=3

xs=12 md=4 lg=3 lgOffset=3 mdOffset=4

xs=12 lg=6 lgOffset=6 mdOffset=4

    
      
  <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} lgOffset={3} mdOffset={4}>xs=12 md=4 lg=3 lgOffset=3 mdOffset=4</Grid>
    <Grid xs={12} lg={6} lgOffset={6} mdOffset={4}>xs=12 lg=6 lgOffset=6 mdOffset=4</Grid>
  </Grid>