From d3d629474568fe84bdde1a52b0cd06502481da42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kate=C5=99ina=20Dlouh=C3=A1?=
 <katerina.dlouha@almamedia.com>
Date: Thu, 25 Jul 2024 10:11:16 +0200
Subject: [PATCH] fixup! Feat(web): Add `spacing` property to `Grid` #DS-1388

---
 packages/web/src/scss/components/Grid/README.md  |  4 ++--
 packages/web/src/scss/components/Grid/index.html | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/scss/components/Grid/README.md b/packages/web/src/scss/components/Grid/README.md
index 12c7f7e02c..05809ddb1a 100644
--- a/packages/web/src/scss/components/Grid/README.md
+++ b/packages/web/src/scss/components/Grid/README.md
@@ -80,12 +80,12 @@ the consistency between the spacing and the design tokens.
 
 If you need to set custom spacing from a specific breakpoint, use the `--grid-spacing-y-{breakpoint}` or the `--grid-spacing-x-{breakpoint}` property,
 e.g. `--grid-spacing-y-tablet: var(--spirit-space-800)`. The breakpoint value must be one of the breakpoint tokens
-except for the `mobile` breakpoint you don't need the suffix at all. The spacing is set to all larger breakpoints
+except for the `mobile` breakpoint where you don't need the suffix at all. The spacing is set to all larger breakpoints
 automatically if you don't set them explicitly. E.g. if you set only `--grid-spacing-y-tablet: var(--spirit-space-800)`
 the spacing will be set to `var(--spirit-space-800)` for `tablet` and `desktop` breakpoints while on the `mobile`
 breakpoint the default spacing will be used.
 
-Custom spacing from tablet up:
+Custom vertical spacing from tablet up:
 
 ```html
 <div class="Grid Grid--cols-2 Grid--tablet--cols-3" style="--grid-spacing-y-tablet: var(--spirit-space-1200)">
diff --git a/packages/web/src/scss/components/Grid/index.html b/packages/web/src/scss/components/Grid/index.html
index 13a998200d..6957f6b6a9 100644
--- a/packages/web/src/scss/components/Grid/index.html
+++ b/packages/web/src/scss/components/Grid/index.html
@@ -244,9 +244,9 @@ <h2 class="docs-Heading">Nested Grid with Grid Item</h2>
             <div
               class="GridItem"
               style="
-              --grid-item-column-start: 1;
-              --grid-item-column-end: span 4;
-            "
+                --grid-item-column-start: 1;
+                --grid-item-column-end: span 4;
+              "
             >
               <div class="docs-Box docs-Box--small">
                 First Nested Content
@@ -255,9 +255,9 @@ <h2 class="docs-Heading">Nested Grid with Grid Item</h2>
             <div
               class="GridItem"
               style="
-              --grid-item-column-start: 6;
-              --grid-item-column-end: span 5;
-            "
+                --grid-item-column-start: 6;
+                --grid-item-column-end: span 5;
+              "
             >
               <div class="docs-Box docs-Box--small">
                 Second Nested Content