diff --git a/.changelog/current/2236-fix-css-grid-layout.md b/.changelog/current/2236-fix-css-grid-layout.md
new file mode 100644
index 000000000..e284c1211
--- /dev/null
+++ b/.changelog/current/2236-fix-css-grid-layout.md
@@ -0,0 +1,3 @@
+### Fixed
+
+- Fix CSS grid layout causing whitespace issues
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d36a8772..efe4573d9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -45,6 +45,8 @@ Sorry for the inconvience.
   [#2281](https://github.com/nextcloud/cookbook/pull/2281) @christianlupus
 - Fix warning in browser console for edits
   [#2287](https://github.com/nextcloud/cookbook/pull/2287) @christianlupus
+- Fix CSS grid layout causing whitespace issues
+  [#2236](https://github.com/nextcloud/cookbook/pull/2236) @philiprenich
 
 ### Documentation
 
diff --git a/src/components/RecipeView/RecipeView.vue b/src/components/RecipeView/RecipeView.vue
index 026a76e9f..2c88baebe 100644
--- a/src/components/RecipeView/RecipeView.vue
+++ b/src/components/RecipeView/RecipeView.vue
@@ -1104,8 +1104,8 @@ main {
 .content > .container {
     display: grid;
 
-    grid-template-columns: 1fr 1em 2fr;
-    grid-template-rows: 100% 100% 100% 1fr;
+    gap: 1em;
+    grid-template-columns: 1fr 2fr;
 
     .ingredients {
         grid-column: 1/2;
@@ -1123,8 +1123,8 @@ main {
     }
 
     main {
-        grid-column: 3/4;
-        grid-row: 1/5;
+        grid-column: 2/3;
+        grid-row: 1/4;
     }
 
     @media screen and (max-width: 850px), print {