diff --git a/site/css/content.scss b/site/css/content.scss
index cc78dc62e44..398ab7bb90e 100644
--- a/site/css/content.scss
+++ b/site/css/content.scss
@@ -269,3 +269,24 @@ figure[data-explorer-src] {
 code {
     white-space: pre-wrap; // make sure long code lines do not overflow
 }
+
+/*******************************************************************************
+ * Grid margin collapse quickfixes
+ * We should probably consider solving this another way but for now we
+ * fix the most common cases with these quickfixes.
+ */
+
+.grid .article-block__text + .h2-bold,
+.grid .article-block__list + .h2-bold,
+.grid .article-block__text + .h3-bold,
+.grid .article-block__list + .h3-bold {
+    // take the default margin-top of h2/3 and subtract the default margin of the p element above
+    margin-top: calc(48px - 16px);
+}
+
+// Images directly under headings have enough space with just the
+// margin-bottom of the heading.
+.grid .h2-bold + .article-block__image,
+.grid .h3-bold + .article-block__image {
+    margin-top: 0px;
+}