diff --git a/package.json b/package.json
index 00a9fb6..5d6d552 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "svelte-grid-extended",
-	"version": "1.1.3",
+	"version": "1.1.4",
 	"description": "A draggable and resizable grid layout, for Svelte",
 	"repository": "https://github.com/cuire/svelte-grid-extended",
 	"scripts": {
diff --git a/src/lib/Grid.svelte b/src/lib/Grid.svelte
index 1e1f404..123dab9 100644
--- a/src/lib/Grid.svelte
+++ b/src/lib/Grid.svelte
@@ -128,6 +128,24 @@
 
 	let shouldExpandCols = false;
 
+	let containerWidth: number | null = null;
+
+	let containerHeight: number | null = null;
+
+	// Check for colls / rows === 0 used to recalculate the grid container only if the grid is dynamic size
+	// #gh-48
+	$: if ($gridSettings.itemSize && cols === 0) {
+		containerWidth = _cols * ($gridSettings.itemSize.width + gap + 1);
+	} else {
+		containerWidth = null;
+	}
+
+	$: if ($gridSettings.itemSize && rows === 0) {
+		containerHeight = _rows * ($gridSettings.itemSize.height + gap + 1);
+	} else {
+		containerHeight = null;
+	}
+
 	$: if (typeof cols === 'number') _cols = cols;
 
 	$: if (typeof rows === 'number') _rows = rows;
@@ -236,7 +254,12 @@
 	setContext(GRID_CONTEXT_NAME, gridSettings);
 </script>
 
-<div class={`svelte-grid-extended ${classes}`} bind:this={gridContainer}>
+<div
+	class={`svelte-grid-extended ${classes}`}
+	bind:this={gridContainer}
+	style={`width: ${containerWidth ? `${containerWidth}px` : '100%'}; 
+	height: ${containerHeight ? `${containerHeight}px` : '100%'};`}
+>
 	{#if $gridSettings.itemSize}
 		<slot />
 	{/if}
diff --git a/src/routes/examples/gh-55/+page.svelte b/src/routes/examples/gh-55/+page.svelte
new file mode 100644
index 0000000..1fa55b5
--- /dev/null
+++ b/src/routes/examples/gh-55/+page.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import Grid, { GridItem } from '$lib';
+
+	const items = [
+		{ id: '0', x: 0, y: 0, w: 2, h: 5 },
+		{ id: '1', x: 2, y: 2, w: 2, h: 2 },
+		{ id: '2', x: 2, y: 0, w: 1, h: 2 },
+		{ id: '3', x: 3, y: 0, w: 2, h: 2 },
+		{ id: '4', x: 4, y: 2, w: 1, h: 3 },
+		{ id: '5', x: 8, y: 0, w: 2, h: 8 },
+		{ id: '6', x: 4, y: 5, w: 1, h: 1 },
+		{ id: '7', x: 2, y: 6, w: 3, h: 2 },
+		{ id: '8', x: 2, y: 4, w: 2, h: 2 },
+		{ id: '9', x: 2, y: 8, w: 2, h: 6 },
+		{ id: '10', x: 2, y: 14, w: 2, h: 2 },
+		{ id: '11', x: 2, y: 16, w: 2, h: 6 },
+		{ id: '11', x: 2, y: 22, w: 2, h: 2 }
+	];
+
+	const itemSize = { height: 30 };
+</script>
+
+<div class="bg-red">
+	<Grid {itemSize} cols={10} collision="compress">
+		{#each items as item}
+			<GridItem x={item.x} y={item.y} w={item.w} h={item.h}>
+				<div class="item">{item.id}</div>
+			</GridItem>
+		{/each}
+	</Grid>
+
+	<div style="height: 100px;" />
+</div>
+
+<style>
+	.item {
+		display: grid;
+		place-items: center;
+		background-color: lightskyblue;
+		width: 100%;
+		height: 100%;
+	}
+	.bg-red {
+		background-color: red;
+		min-height: 100vh;
+	}
+</style>