diff --git a/packages/api-generator/src/FluidGrid.json b/packages/api-generator/src/FluidGrid.json
new file mode 100644
index 00000000..11194162
--- /dev/null
+++ b/packages/api-generator/src/FluidGrid.json
@@ -0,0 +1,216 @@
+{
+  "version": 3,
+  "name": "FluidGrid",
+  "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "container",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "item",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "spacing",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "direction",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "justify",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "alignItems",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "xs",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "sm",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "md",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "lg",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "xl",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "style",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "class",
+      "kind": "const",
+      "static": false,
+      "readonly": true,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "localName": "klass"
+    }
+  ],
+  "computed": [],
+  "methods": [],
+  "components": [],
+  "description": null,
+  "keywords": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": null,
+      "visibility": "public",
+      "parameters": []
+    }
+  ],
+  "refs": []
+}
\ No newline at end of file
diff --git a/packages/api-generator/src/all.json b/packages/api-generator/src/all.json
index 3055ddd5..1bff6808 100644
--- a/packages/api-generator/src/all.json
+++ b/packages/api-generator/src/all.json
@@ -19,6 +19,7 @@
     "Divider",
     "ExpansionPanel",
     "ExpansionPanels",
+    "FluidGrid",
     "Footer",
     "Col",
     "Container",
diff --git a/packages/api-generator/src/index.js b/packages/api-generator/src/index.js
index bf079b43..360ca8e7 100644
--- a/packages/api-generator/src/index.js
+++ b/packages/api-generator/src/index.js
@@ -18,6 +18,7 @@ export { default as Dialog } from './Dialog.json';
 export { default as Divider } from './Divider.json';
 export { default as ExpansionPanel } from './ExpansionPanel.json';
 export { default as ExpansionPanels } from './ExpansionPanels.json';
+export { default as FluidGrid } from './FluidGrid.json';
 export { default as Footer } from './Footer.json';
 export { default as Col } from './Col.json';
 export { default as Container } from './Container.json';
diff --git a/packages/docs/src/components/doc/Playground.svelte b/packages/docs/src/components/doc/Playground.svelte
index 36d56aa5..70d93233 100644
--- a/packages/docs/src/components/doc/Playground.svelte
+++ b/packages/docs/src/components/doc/Playground.svelte
@@ -93,7 +93,15 @@
               <span class="text--secondary">{label}</span>
             </Switch>
           {:else if controls[label].type === 'slider'}
-            <Slider bind:value={values[label]}>{label}</Slider>
+            <Slider
+              bind:value={values[label]}
+              min={controls[label].min || 0}
+              max={controls[label].max || 100}
+              step={controls[label].step || null}
+              thumb={controls[label].thumb || false}
+              persistentThumb={controls[label].persistentThumb || false}>
+              {label}
+            </Slider>
           {:else if controls[label].type === 'select'}
             <Select
               class="mt-4"
diff --git a/packages/docs/src/examples/FluidGrid/autolayout.svelte b/packages/docs/src/examples/FluidGrid/autolayout.svelte
new file mode 100644
index 00000000..acee77ec
--- /dev/null
+++ b/packages/docs/src/examples/FluidGrid/autolayout.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { FluidGrid } from 'svelte-materialify/src';
+</script>
+
+<FluidGrid container spacing={3}>
+  <FluidGrid item xs>
+    <div>xs</div>
+  </FluidGrid>
+  <FluidGrid item xs>
+    <div>xs</div>
+  </FluidGrid>
+  <FluidGrid item xs>
+    <div>xs</div>
+  </FluidGrid>
+</FluidGrid>
+
+<FluidGrid container spacing={3}>
+  <FluidGrid item xs>
+    <div>xs</div>
+  </FluidGrid>
+  <FluidGrid item xs={6}>
+    <div>xs=6</div>
+  </FluidGrid>
+  <FluidGrid item xs>
+    <div>xs</div>
+  </FluidGrid>
+</FluidGrid>
diff --git a/packages/docs/src/examples/FluidGrid/basic.svelte b/packages/docs/src/examples/FluidGrid/basic.svelte
new file mode 100644
index 00000000..8e24f54a
--- /dev/null
+++ b/packages/docs/src/examples/FluidGrid/basic.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { FluidGrid } from 'svelte-materialify/src';
+</script>
+
+<FluidGrid container spacing={3}>
+  <FluidGrid item xs={12}>
+    <div>xs=12</div>
+  </FluidGrid>
+  <FluidGrid item xs={6}>
+    <div>xs=6</div>
+  </FluidGrid>
+  <FluidGrid item xs={6}>
+    <div>xs=6</div>
+  </FluidGrid>
+  <FluidGrid item xs={3}>
+    <div>xs=3</div>
+  </FluidGrid>
+  <FluidGrid item xs={3}>
+    <div>xs=3</div>
+  </FluidGrid>
+  <FluidGrid item xs={3}>
+    <div>xs=3</div>
+  </FluidGrid>
+  <FluidGrid item xs={3}>
+    <div>xs=3</div>
+  </FluidGrid>
+</FluidGrid>
diff --git a/packages/docs/src/examples/FluidGrid/breakpoints.svelte b/packages/docs/src/examples/FluidGrid/breakpoints.svelte
new file mode 100644
index 00000000..63dec28d
--- /dev/null
+++ b/packages/docs/src/examples/FluidGrid/breakpoints.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { FluidGrid } from 'svelte-materialify/src';
+</script>
+
+<FluidGrid container spacing={3}>
+  <FluidGrid item xs={12}>
+    <div>xs=12</div>
+  </FluidGrid>
+  <FluidGrid item xs={12} sm={6}>
+    <div>xs=12 sm=6</div>
+  </FluidGrid>
+  <FluidGrid item xs={12} sm={6}>
+    <div>xs=12 sm=6</div>
+  </FluidGrid>
+  <FluidGrid item xs={6} sm={3}>
+    <div>xs=6 sm=3</div>
+  </FluidGrid>
+  <FluidGrid item xs={6} sm={3}>
+    <div>xs=6 sm=3</div>
+  </FluidGrid>
+  <FluidGrid item xs={6} sm={3}>
+    <div>xs=6 sm=3</div>
+  </FluidGrid>
+  <FluidGrid item xs={6} sm={3}>
+    <div>xs=6 sm=3</div>
+  </FluidGrid>
+</FluidGrid>
diff --git a/packages/docs/src/examples/FluidGrid/nested.svelte b/packages/docs/src/examples/FluidGrid/nested.svelte
new file mode 100644
index 00000000..b17df23a
--- /dev/null
+++ b/packages/docs/src/examples/FluidGrid/nested.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { FluidGrid } from 'svelte-materialify/src';
+</script>
+
+<FluidGrid container spacing={1}>
+  {#each Array(3) as _}
+    <FluidGrid container item xs={12} spacing={3}>
+      <FluidGrid item xs={4}>
+        <div>xs=4</div>
+      </FluidGrid>
+      <FluidGrid item xs={4}>
+        <div>xs=4</div>
+      </FluidGrid>
+      <FluidGrid item xs={4}>
+        <div>xs=4</div>
+      </FluidGrid>
+    </FluidGrid>
+  {/each}
+</FluidGrid>
diff --git a/packages/docs/src/examples/FluidGrid/usage.svelte b/packages/docs/src/examples/FluidGrid/usage.svelte
new file mode 100644
index 00000000..42d1b368
--- /dev/null
+++ b/packages/docs/src/examples/FluidGrid/usage.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { FluidGrid } from 'svelte-materialify/src';
+</script>
+
+<FluidGrid container>
+  <FluidGrid item xs>
+    <div>One of Three</div>
+  </FluidGrid>
+  <FluidGrid item xs>
+    <div>One of Three</div>
+  </FluidGrid>
+  <FluidGrid item xs>
+    <div>One of Three</div>
+  </FluidGrid>
+</FluidGrid>
diff --git a/packages/docs/src/playground/FluidGrid.svelte b/packages/docs/src/playground/FluidGrid.svelte
new file mode 100644
index 00000000..1de632cd
--- /dev/null
+++ b/packages/docs/src/playground/FluidGrid.svelte
@@ -0,0 +1,60 @@
+<script>
+  import Playground from '@/components/doc/Playground.svelte';
+  import { FluidGrid } from 'svelte-materialify/src';
+
+  const controls = {
+    spacing: {
+      type: 'slider',
+      min: 0,
+      max: 16,
+      step: 1,
+      thumb: true,
+      persistentThumb: true,
+    },
+    direction: {
+      type: 'select',
+      items: ['row', 'row-reverse', 'column', 'column-reverse'],
+    },
+    justify: {
+      type: 'select',
+      items: ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'],
+    },
+    alignItems: {
+      type: 'select',
+      items: ['start', 'center', 'end', 'stretch', 'baseline'],
+    },
+  };
+
+  let values = {
+    spacing: 3,
+    direction: 'row',
+    justify: 'center',
+    alignItems: 'start',
+  };
+</script>
+
+<Playground {controls} bind:values>
+  <FluidGrid
+    container
+    bind:spacing={values.spacing}
+    bind:direction={values.direction}
+    bind:justify={values.justify}
+    bind:alignItems={values.alignItems}
+    style="width: 100%;">
+    <FluidGrid item>
+      <div class="rounded" style="width: 150px; padding: 10px 0px; font-size: 1em;">
+        1
+      </div>
+    </FluidGrid>
+    <FluidGrid item>
+      <div class="rounded" style="width: 150px; padding: 20px 0px; font-size: 2em;">
+        2
+      </div>
+    </FluidGrid>
+    <FluidGrid item>
+      <div class="rounded" style="width: 150px; padding: 30px 0px; font-size: 3em;">
+        3
+      </div>
+    </FluidGrid>
+  </FluidGrid>
+</Playground>
diff --git a/packages/docs/src/routes/components/fluidgrid.md b/packages/docs/src/routes/components/fluidgrid.md
new file mode 100644
index 00000000..582bf3f3
--- /dev/null
+++ b/packages/docs/src/routes/components/fluidgrid.md
@@ -0,0 +1,67 @@
+---
+title: FluidGrid
+description: Svelte Materialify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application.
+keywords: grids, svelte materialify grid, layout component, flex component
+related:
+  - components/container
+  - components/row
+  - components/col
+---
+
+<script>
+  import Playground from '@/playground/FluidGrid.svelte';
+</script>
+
+<style lang="scss">
+  @mixin make-item-rule {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 12px;
+    background-color: var(--theme-dividers);
+  }
+  :global(.example .s-fluid-grid.item > div:not(.item)) {
+    @include make-item-rule;
+  }
+  :global(.playground .s-fluid-grid.item > div:not(.item)) {
+    @include make-item-rule;
+  }
+</style>
+
+# Fluid Grid
+
+Svelte Materialify comes with a 12 column grid system built using flexbox. The grid is used to create specific layouts within an application’s content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, **xs**, **sm**, **md**, **lg** and **xl**.
+
+## Playground
+
+<Playground />
+
+## API
+
+- [FluidGrid](/api/FluidGrid/)
+
+## Usage
+
+The `FluidGrid` component is used to layout, align and space content.
+It is heavily inspired by the [Material-UI Grid](https://material-ui.com/components/grid/).
+
+<Components.Example file="FluidGrid/usage" />
+
+## Examples
+
+### Basic grid
+
+<Components.Example file="FluidGrid/basic" />
+
+### Grid with breakpoints
+
+<Components.Example file="FluidGrid/breakpoints" />
+
+### Auto-layout
+
+<Components.Example file="FluidGrid/autolayout" />
+
+### Nested grid
+
+<Components.Example file="FluidGrid/nested" />
diff --git a/packages/docs/src/util/routes.js b/packages/docs/src/util/routes.js
index 631aa1e1..e6151903 100644
--- a/packages/docs/src/util/routes.js
+++ b/packages/docs/src/util/routes.js
@@ -55,6 +55,7 @@ export default [
       { text: 'Dialog', href: '/components/dialog/' },
       { text: 'Dividers', href: '/components/dividers/' },
       { text: 'Grid', href: '/components/grid/' },
+      { text: 'FluidGrid', href: '/components/fluidgrid/' },
       { text: 'Icons', href: '/components/icons/' },
       { text: 'Expansion Panels', href: '/components/expansion-panels/' },
       { text: 'Footer', href: '/components/footer/' },
diff --git a/packages/svelte-materialify/@types/FluidGrid.d.ts b/packages/svelte-materialify/@types/FluidGrid.d.ts
new file mode 100644
index 00000000..869e9cd6
--- /dev/null
+++ b/packages/svelte-materialify/@types/FluidGrid.d.ts
@@ -0,0 +1,40 @@
+import { SvelteComponent } from 'svelte-materialify/@types/shared';
+
+interface FluidGridProps {
+  /** whether this is a container */
+  container?: boolean;
+  /** whether this is an item */
+  item?: boolean;
+  /** amount of grid spacing */
+  spacing?: number;
+  /** sets direction of grid grid */
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  /** sets justification of grid items */
+  justify?:
+    | 'start'
+    | 'center'
+    | 'end'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+  /** sets alignment of grid items */
+  alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  /** sets column size at xs-breakpoint */
+  xs?: number | boolean;
+  /** sets column size at sm-breakpoint */
+  sm?: number | boolean;
+  /** sets column size at md-breakpoint */
+  md?: number | boolean;
+  /** sets column size at lg-breakpoint */
+  lg?: number | boolean;
+  /** sets column size at xl-breakpoint */
+  xl?: number | boolean;
+  /** classes added to the grid */
+  class?: string;
+  /** styles added to the grid */
+  style?: string;
+}
+
+declare class FluidGrid extends SvelteComponent<FluidGridProps> {}
+
+export default FluidGrid;
diff --git a/packages/svelte-materialify/@types/index.d.ts b/packages/svelte-materialify/@types/index.d.ts
index ec023ea3..4efd7b04 100644
--- a/packages/svelte-materialify/@types/index.d.ts
+++ b/packages/svelte-materialify/@types/index.d.ts
@@ -18,6 +18,7 @@ export { default as CardActions } from './CardActions';
 export { default as Container } from './Container';
 export { default as Col } from './Col';
 export { default as Divider } from './Divider';
+export { default as FluidGrid } from './FluidGrid';
 export { default as ItemGroup } from './ItemGroup';
 export { default as Icon } from './Icon';
 export { default as Input } from './Input';
diff --git a/packages/svelte-materialify/src/components/FluidGrid/FluidGrid.scss b/packages/svelte-materialify/src/components/FluidGrid/FluidGrid.scss
new file mode 100644
index 00000000..2a062f1e
--- /dev/null
+++ b/packages/svelte-materialify/src/components/FluidGrid/FluidGrid.scss
@@ -0,0 +1,44 @@
+@import '../../styles/variables';
+
+$grid-breakpoint-names: map-keys($grid-breakpoints);
+
+@mixin create_spacing() {
+  @for $i from 1 through 16 {
+    @content ($i);
+  }
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+
+  @include create_spacing() using ($i) {
+    &.container-spacing-#{$i} {
+      margin: -$spacer * $i;
+    }
+  }
+}
+
+.item {
+  @include create_spacing() using ($i) {
+    &.item-spacing-#{$i} {
+      padding: $spacer * $i;
+    }
+  }
+
+  @each $grid-breakpoint-name in $grid-breakpoint-names {
+    @media (min-width: map-get($grid-breakpoints, $grid-breakpoint-name)) {
+      &.#{$grid-breakpoint-name}-auto {
+        flex-grow: 1;
+        min-width: 0;
+        width: 0;
+      }
+
+      @for $i from 1 through $grid-columns {
+        &.#{$grid-breakpoint-name}-#{$i} {
+          width: percentage($i / $grid-columns);
+        }
+      }
+    }
+  }
+}
diff --git a/packages/svelte-materialify/src/components/FluidGrid/FluidGrid.svelte b/packages/svelte-materialify/src/components/FluidGrid/FluidGrid.svelte
new file mode 100644
index 00000000..cf94bacc
--- /dev/null
+++ b/packages/svelte-materialify/src/components/FluidGrid/FluidGrid.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { setContext, getContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import contextKey from './context';
+
+  let klass = '';
+  export let container = false;
+  export let item = false;
+  export let spacing = null;
+  export let direction = null;
+  export let justify = null;
+  export let alignItems = null;
+  export let xs = null;
+  export let sm = null;
+  export let md = null;
+  export let lg = null;
+  export let xl = null;
+  export let style = null;
+  export { klass as class };
+
+  let parentSpacingStore;
+  let childSpacingStore;
+
+  if (item) {
+    parentSpacingStore = getContext(contextKey);
+  }
+  if (container) {
+    childSpacingStore = writable(spacing);
+    const { set, update, ...readonly } = childSpacingStore;
+    setContext(contextKey, readonly);
+  }
+  $: if (childSpacingStore) {
+    childSpacingStore.set(spacing);
+  }
+
+  function breakpointClass(name, value) {
+    if (Number.isInteger(value)) {
+      return `${name}-${value}`;
+    }
+    if (value) {
+      return `${name}-auto`;
+    }
+    return null;
+  }
+
+  let classes;
+  $: classes = [
+    klass,
+    container && spacing > 0 && `container-spacing-${spacing}`,
+    item && $parentSpacingStore > 0 && `item-spacing-${$parentSpacingStore}`,
+    container && direction && `flex-${direction}`,
+    container && justify && `justify-${justify}`,
+    container && alignItems && `align-${alignItems}`,
+    breakpointClass('xs', xs),
+    breakpointClass('sm', sm),
+    breakpointClass('md', md),
+    breakpointClass('lg', lg),
+    breakpointClass('xl', xl),
+  ].filter((x) => x !== false);
+</script>
+
+<style lang="scss" src="./FluidGrid.scss">
+</style>
+
+<div class="s-fluid-grid {classes.join(' ')}" class:container class:item {style}>
+  <slot />
+</div>
diff --git a/packages/svelte-materialify/src/components/FluidGrid/context.js b/packages/svelte-materialify/src/components/FluidGrid/context.js
new file mode 100644
index 00000000..bfd11288
--- /dev/null
+++ b/packages/svelte-materialify/src/components/FluidGrid/context.js
@@ -0,0 +1,3 @@
+const key = {};
+
+export { key as default };
diff --git a/packages/svelte-materialify/src/components/FluidGrid/index.js b/packages/svelte-materialify/src/components/FluidGrid/index.js
new file mode 100644
index 00000000..c3b1d3f9
--- /dev/null
+++ b/packages/svelte-materialify/src/components/FluidGrid/index.js
@@ -0,0 +1 @@
+export { default } from './FluidGrid.svelte';
diff --git a/packages/svelte-materialify/src/index.js b/packages/svelte-materialify/src/index.js
index 8e58c0a7..f44ff705 100644
--- a/packages/svelte-materialify/src/index.js
+++ b/packages/svelte-materialify/src/index.js
@@ -42,6 +42,7 @@ export { default as Overlay } from './components/Overlay';
 export { default as NavigationDrawer } from './components/NavigationDrawer';
 export { default as Subheader } from './components/Subheader';
 export { Container, Row, Col } from './components/Grid';
+export { default as FluidGrid } from './components/FluidGrid';
 export { default as Lazy } from './components/Lazy';
 export { default as Table } from './components/Table';
 export { default as ItemGroup } from './components/ItemGroup';
diff --git a/packages/svelte-materialify/src/styles/generic/_flex.scss b/packages/svelte-materialify/src/styles/generic/_flex.scss
index b9d5285e..6bda3a9a 100644
--- a/packages/svelte-materialify/src/styles/generic/_flex.scss
+++ b/packages/svelte-materialify/src/styles/generic/_flex.scss
@@ -52,6 +52,10 @@
   justify-content: space-around;
 }
 
+.justify-space-evenly {
+  justify-content: space-evenly;
+}
+
 @include create_breakpoints() using ($screen_size) {
   .justify-#{$screen_size}-start {
     justify-content: flex-start;