From acda072850e3e239cae125ad05a2684eae55e481 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Thu, 21 May 2026 17:11:48 +0100
Subject: [PATCH] Make centre rule configurable in grid API

---
 .../src/components/GalleryCaption.tsx         | 24 ---------
 .../src/components/GalleryImage.tsx           |  7 ++-
 dotcom-rendering/src/grid.ts                  | 50 +++++++++++++------
 3 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/dotcom-rendering/src/components/GalleryCaption.tsx b/dotcom-rendering/src/components/GalleryCaption.tsx
index 26a71ba6205..9b5cf754a00 100644
--- a/dotcom-rendering/src/components/GalleryCaption.tsx
+++ b/dotcom-rendering/src/components/GalleryCaption.tsx
@@ -31,34 +31,10 @@ const styles = css`
 
 	${between.desktop.and.leftCol} {
 		${grid.column.right}
-
-		position: relative; /* allows the ::before to be positioned relative to this */
-
-		&::before {
-			content: '';
-			position: absolute;
-			left: -10px; /* 10px to the left of this element */
-			top: 0;
-			bottom: 0;
-			width: 1px;
-			background-color: ${palette('--article-border')};
-		}
 	}
 
 	${from.leftCol} {
 		${grid.column.left}
-
-		position: relative; /* allows the ::before to be positioned relative to this */
-
-		&::after {
-			content: '';
-			position: absolute;
-			right: -11px;
-			top: -12px;
-			bottom: 0;
-			width: 1px;
-			background-color: ${palette('--article-border')};
-		}
 	}
 `;
 
diff --git a/dotcom-rendering/src/components/GalleryImage.tsx b/dotcom-rendering/src/components/GalleryImage.tsx
index 5ce317dcd10..5a37ed732c7 100644
--- a/dotcom-rendering/src/components/GalleryImage.tsx
+++ b/dotcom-rendering/src/components/GalleryImage.tsx
@@ -22,8 +22,9 @@ type Props = {
 };
 
 const styles = css`
+	overflow: hidden;
 	${grid.paddedContainer}
-	${grid.verticalRules()}
+	${grid.verticalRules({ plusChild: 1 })}
 	grid-auto-flow: row dense;
 	background-color: ${palette('--article-inner-background')};
 
@@ -34,7 +35,9 @@ const styles = css`
 
 	${from.desktop} {
 		&:first-of-type {
-			padding-top: ${space[3]}px;
+			& > * {
+				padding-top: ${space[3]}px;
+			}
 		}
 	}
 `;
diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index ad089db43e1..3e2bb8d54a0 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -88,35 +88,54 @@ const paddedContainer = `
 // ----- Vertical Rules ----- //
 
 type VerticalRuleOptions = {
-	centre?: boolean;
+	plusChild?: number;
 };
 
 /**
  * Render Guardian grid vertical rules.
  *
  * Left and right rules are always present.
- * A centre rule can optionally be enabled.
+ * A centre rule can optionally be enabled, anchored to the nth
+ * child of the grid container as specified by the `plusChild` option
  *
  * Usage:
  * css([grid.container, grid.verticalRules()])
- * css([grid.container, grid.verticalRules({ centre: true })])
+ * css([grid.container, grid.verticalRules({ plusChild: 3 })])
  */
-const optionalCentreRule = `/* CENTRE RULE */
-    & > *:first-child::before {
-      grid-column: centre-column-start;
-      transform: translateX(-${columnGap});
-	  ${fromBreakpoint.leftCol} {
-		transform: translateX(calc(-${columnGap} / 2));
-	  }
+
+// The centre rule is self-contained on the nth child element rather than on
+// the grid container, so that `top: 0` aligns to that element's top edge.
+// `bottom` uses a large negative value to extend the rule down to the
+// container's bottom; ensure `overflow: hidden` is set on the container
+const optionalCentreRule = (nth: number): string => `/* CENTRE RULE */
+    & > *:nth-child(${nth}) {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        bottom: -9999px;
+        width: 1px;
+        background-color: ${palette('--article-border')};
+        content: '';
+        grid-column: centre-column-start;
+        transform: translateX(-${columnGap});
+
+        ${fromBreakpoint.leftCol} {
+          transform: translateX(calc(-${columnGap} / 2));
+        }
+      }
     }`;
 
-const verticalRules = (options: VerticalRuleOptions = {}): string => `
+const verticalRules = (options: VerticalRuleOptions = {}): string => {
+	const { plusChild } = options;
+
+	return `
   ${fromBreakpoint.tablet} {
     position: relative;
 
     &::before,
-    &::after
-    ${options.centre ? ', & > *:first-child::before' : ''} {
+    &::after {
       position: absolute;
       top: 0;
       bottom: 0;
@@ -145,8 +164,9 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
       }
     }
 
-    ${options.centre ? optionalCentreRule : ''}
-`;
+    ${plusChild !== undefined ? optionalCentreRule(plusChild) : ''}
+  }`;
+};
 
 // ----- API ----- //