docs: add image for grid guidlines (#1766)

apps/for-everyone-website/src/content/docs/guides/grid.mdx

@@ -127,6 +127,7 @@ Page content does not always need to span across 12 columns; it can occupy a sma
 To aid in implementing and visualising the Origami grid system in your projects, we offer a Chrome extension that provides a customisable grid overlay for your web pages. This helps you understand how your website aligns to Origami's grid system.
 
 Key features:
+
 - Enable/disable grid overlay with a single click
 - Customize column, gutter, and margin colors
 - Adjust grid opacity
@@ -142,9 +143,9 @@ Key features:
 		larger or smaller to help group regions hierarchically on the page.
 	</p>
 
-    <Example slot="examples" do={true}>
-    	![](/assets/images/components/grid/usage-best-practise.svg)
-    </Example>
+	<Example slot="examples" do={true}>
+		![](/assets/images/components/grid/usage-best-practise.svg)
+	</Example>
 
 </Guideline>
 
@@ -157,4 +158,9 @@ Key features:
 		invisible element around the content which does align to the grid. Ensure no
 		other content overlaps this grid area.
 	</p>
+
+	<Example slot="examples" do={true}>
+		![](/assets/images/components/grid/usage-best-practise-ad.svg)
+	</Example>
+
 </Guideline>